Tailwind to CSS

Paste a list of Tailwind CSS utility classes and get the equivalent plain CSS. The converter resolves each class against Tailwind's default theme — the spacing scale, the full colour palette, font sizes, shadows and the rest — and groups the declarations into a rule for your selector. Variant prefixes are expanded too: responsive ones like md: become @media queries, state prefixes like hover: become pseudo-classes, and dark: becomes a prefers-color-scheme query. Everything runs in your browser.

CSS

How to use the Tailwind to CSS

Paste your Tailwind classes into the box — copy them straight from a class="…" attribute. Set the selector you want the rules written against (it defaults to .element), and the CSS updates as you type. Each utility is translated to its declaration, classes that target the same context are merged into one rule, and the output is ready to paste into a stylesheet. Anything the converter doesn't recognise is listed in a note rather than dropped silently, so you can see exactly what wasn't translated.

Variants are handled by their prefix. A responsive prefix such as md: wraps its declarations in @media (min-width: 768px); state prefixes like hover:, focus: and disabled: attach the matching pseudo-class to your selector; and dark: produces a @media (prefers-color-scheme: dark) block. Combine them — md:hover:underline becomes a hover rule inside the medium-breakpoint media query — and the base, state and responsive rules are emitted in a sensible cascade order.

From utilities back to CSS

Tailwind CSS is a utility-first framework: instead of writing CSS rules, you compose a design from small single-purpose classes applied directly in your markup — p-4 for padding, flex for display, bg-blue-500 for a background colour. Each class maps to one or a few CSS declarations drawn from a configurable design system (the "theme"), where, for instance, the spacing scale is built on 0.25rem steps so p-4 means 1rem, and the colour palette is a fixed set of named hues and shades. This is why Tailwind markup is fast to write and consistent, but also why it can be opaque if you don't have the scale memorised.

Translating utilities back to plain CSS is useful more often than it sounds. You might be removing Tailwind from a project, lifting a snippet into a context where the framework isn't available, building a component library that ships vanilla CSS, or simply trying to understand exactly what a dense string of classes resolves to. The mechanical part — looking up shadow-md's box-shadow value or what tracking-wide sets letter-spacing to — is tedious and error-prone by hand, which is precisely what a converter removes.

The genuinely tricky part is the variant system. A prefix before the colon changes when a utility applies rather than what it does, and each kind compiles to a different CSS construct: responsive prefixes are min-width media queries, state prefixes are pseudo-classes, and the dark-mode prefix is (in the default configuration) a colour-scheme media query. Stacking them — responsive-plus-state, for example — nests these constructs, and the order rules are written in matters for the cascade. Expanding that correctly from labelled prefixes is exactly the kind of bookkeeping worth automating, and seeing the expansion is a good way to learn how Tailwind's variants actually work under the hood.

Common use cases

  • Migrating off Tailwind. Turn utility classes into plain CSS when removing the framework from a project.
  • Portable snippets. Lift a component into a context where Tailwind isn't available.
  • Understanding classes. See exactly what a dense class string resolves to, including variants.
  • Learning the theme. Check the spacing, colour and shadow values behind the utility names.

Frequently asked questions

Which Tailwind version and theme does it use?
It resolves against the Tailwind CSS v3 default theme — the standard spacing scale, the full default colour palette with all shades, font sizes, font weights, border radii, shadows, line-heights and letter-spacing. If your project customises the theme in tailwind.config.js, the values may differ from your build.

Are responsive and hover variants supported?
Yes. Responsive prefixes (sm, md, lg, xl, 2xl) become min-width media queries; state prefixes (hover, focus, active, disabled, first, last and more) become pseudo-classes; dark becomes a prefers-color-scheme query; and motion-reduce/motion-safe and print are handled too. Stacked variants like md:hover: are expanded together.

What happens to classes it doesn't recognise?
They're skipped and listed in a note below the input so you know exactly what wasn't converted, rather than being dropped silently. This covers arbitrary-value classes (like w-[37px]), plugin classes, and the less common utilities not in the built-in map.

Does it support arbitrary values like p-[13px]?
Not currently — arbitrary-value syntax in square brackets is reported as unrecognised. The converter focuses on the standard theme-based utilities, which cover the large majority of real-world class lists. You can add arbitrary values to the output CSS by hand.

Is my code uploaded anywhere?
No. The conversion runs entirely in your browser with a built-in copy of the default theme — there's no network request and nothing you paste is stored or transmitted.