npm package: @nkstack/tailwind-editor
Description: Reusable React component to inspect and edit Tailwind class strings
Latest version: 0.1.0
Deprecated: Deprecated: package moved to @nkstack/tailwind-editor-react and @nkstack/tailwind-editor-core. Please migrate.

# tailwind-style-inspector

`tailwind-style-inspector` is a React + TypeScript library for editing Tailwind CSS classes through structured UI controls.

## Why this project exists

Tailwind class strings are fast to author but become difficult to inspect and safely edit at scale.

This project aims to provide:
- Visual editing for common Tailwind utility groups.
- Safe round-tripping from class string -> UI state -> class string.
- Preservation of unknown and unsupported classes.
- A reusable controlled API for editors, CMS builders, and internal tooling.

## What it does today

Two reusable controlled components are available:
1. `TailwindInspector`
2. `TailwindInspectorToolbar`

Both accept a `value` class string and emit `onChange(nextClassString)`.

The library currently supports:
- Spacing utilities: `p`, `px`, `py`, `m`, `mx`, `my`
- Surface utilities: `bg-*`, `rounded*`, `shadow*`
- Typography utilities: `text-*` (size/color distinction), `font-*`
- Layout utilities: `display`, `w-*`, `h-*`
- Toolbar typography controls: font family, text color, text size, bold, italic, underline, text align, tracking
- Preservation of variant classes (`sm:`, `md:`, `hover:`, `focus:`) as-is
- Preservation of unknown/unparsed utilities as-is
- Deterministic class rebuild with `tailwind-merge`

## Public API

```ts
export { TailwindInspector };
export { TailwindInspectorToolbar };

export { parseTailwindClasses };
export { buildClassString };
export { parseToolbarModel };
export { applyToolbarModel };

export type {
  InspectorState,
  ParseResult,
  PreservedClasses,
  TailwindInspectorProps,
  TailwindInspectorToolbarProps,
  TailwindInspectorToolbarModel,
  ToolbarFontFamily,
  ToolbarTextAlign,
  ToolbarTracking
};
```

## Installation

```bash
pnpm add tailwind-style-inspector
```

## Usage

```tsx
import { useState } from "react";
import { TailwindInspector, TailwindInspectorToolbar } from "tailwind-style-inspector";
import "tailwind-style-inspector/style.css";

export function Demo() {
  const [classes, setClasses] = useState("px-4 py-2 bg-gray-200 text-sm rounded");

  return (
    <div className="space-y-4">
      <TailwindInspectorToolbar value={classes} onChange={setClasses} />
      <TailwindInspector value={classes} onChange={setClasses} />
      <pre>{classes}</pre>
    </div>
  );
}
```

## Styling and stack

- React 19 + TypeScript
- Vite library mode
- Tailwind CSS v4
- `shadcn/ui` (Radix primitives)
- Vitest + Testing Library
- Library stylesheet export: `tailwind-style-inspector/style.css`

## Architecture

- `src/core/*`: parser/serializer/model utilities
- `src/components/*`: inspector + toolbar components
- `src/components/ui/*`: shadcn primitives
- `src/example/*`: local demo app
- `tests/*`: pure function and component tests

## Current status

Completed:
- MVP parser/serializer for supported utility groups
- Inspector panel UI
- Toolbar UI (dark segmented style)
- Unknown/variant preservation behavior
- Unit + component smoke coverage

Pending / next:
- Editable variant scopes (base/sm/md/lg/hover/focus) instead of preserve-only
- Broader utility coverage (borders, gap, positioning, grid templates, alignment)
- Better arbitrary value editing (`[value]` UX)
- Storybook/docs site
- CI and release automation

## Parser strategy

Third-party parser evaluation notes are in:
- [docs/parser-library-evaluation.md](./docs/parser-library-evaluation.md)

Current decision:
- Keep the project parser for MVP because mapping to inspector-specific state is domain-specific.

## Local development

```bash
pnpm install
pnpm dev
pnpm typecheck
pnpm test:run
pnpm build
```