Why it matters
Tailwind is quick to write but can be hard to read back: a button with fifteen classes hides the actual CSS, and moving a component out of a Tailwind project means working out what each utility does. Lookup tables online go stale with each Tailwind release, and they rarely handle variants, opacity modifiers or arbitrary values like grid-cols-[1fr_auto].
This expander runs Tailwind CSS v4's own compiler, bundled into the page with the default theme, so the output is exactly what Tailwind would generate for those classes. Paste class names or a chunk of HTML: it pulls out the class attributes, compiles them and shows the CSS as Tailwind writes it, with the theme variables it uses. A second version fills in those variables and folds the simple calc() expressions, giving plain CSS you can drop into a project without Tailwind. Classes that generate nothing are flagged, which catches typos and classes that need a custom config.
How to use it
- Paste Tailwind classes, or HTML with class attributes.
- Read the summary for classes that don't generate CSS.
- Copy the Tailwind output, or the plain CSS for use without Tailwind.
- Check the table to see each class and its variants.
FAQ
Which version of Tailwind does it use?
Tailwind CSS v4.3.3 with the default theme. Classes from plugins or a custom theme won't generate anything.
Does it handle hover:, md: and dark:?
Yes. Variants, stacked variants, arbitrary values and opacity modifiers all compile the same way they would in your build.
What's the plain CSS version?
Tailwind's output uses theme variables like --spacing and --color-sky-500. The plain version fills those in, so the CSS works without Tailwind's theme layer.
Is my code uploaded?
No. The compiler runs in your browser.
Credits and licences
Uses the Tailwind CSS v4.3.3 compiler and default theme (MIT License, Tailwind Labs, Inc.).
