Inspect and edit Tailwind utility classes as plain CSS in an interactive CodeLens-powered editor. Click a class attribute, tweak the CSS, and apply — your Tailwind classes update automatically.
Features
Hover to edit — Hover over any class string inside className or class attributes to open the CSS editor, works with static strings and individual strings inside dynamic expressions like cn(), clsx(), and ternaries
Real CSS editor — Full CodeMirror 6 editor with syntax highlighting and autocomplete
Tailwind CSS v4 engine — Uses the real Tailwind compiler for pixel-perfect CSS output
Bidirectional conversion — Edit CSS and get Tailwind classes back; classes you didn't touch are preserved exactly
Variant support — Responsive (lg:hidden), state (hover:underline), dark mode, and stacked variants rendered as real CSS blocks
Usage
Open a file containing className or class attributes (JSX, TSX, HTML, Vue)
Hover over a class string — click Edit CSS in the hover popup
A CSS editor opens showing the current Tailwind classes as plain CSS
Edit the CSS — change values, add new properties, or remove lines
