@nkstack/tailwind-editor-react

React components for editing Tailwind class strings with structured controls.

Install

pnpm add @nkstack/tailwind-editor-react

Peer dependencies

• react@^19
• react-dom@^19
• tailwindcss@^4

Quick usage

import { useState } from "react";
import {
  TailwindInspector,
  TailwindInspectorToolbar,
} from "@nkstack/tailwind-editor-react";
import "@nkstack/tailwind-editor-react/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>
  );
}

Exports

• TailwindInspector
• TailwindInspectorToolbar
• TailwindInspectorProps
• TailwindInspectorToolbarProps
• stylesheet export: @nkstack/tailwind-editor-react/style.css

Features

• Controlled APIs (value + onChange)
• Inspector panel + compact toolbar experiences
• Preserves variant and unknown classes
• Deterministic class rebuild behavior via core engine

License

MIT