Does it know about my custom theme tokens?

No — the tool uses the default Tailwind v3 theme (the colors and spacing scale shipped in `tailwindcss`). If your `tailwind.config.js` extends those, the customizations won't be reflected. Stick to default tokens or manually translate the customs.

What about responsive variants like `md:flex-row`?

Wrapped in `@media (min-width: 768px) { ... }` for `md:`, 1024px for `lg:`, etc. — using Tailwind's default breakpoints. If you've customized them in tailwind.config, the breakpoints in the output will be wrong.

Does it handle dark mode (`dark:bg-slate-900`)?

Yes — wrapped in a `.dark &` selector by default (Tailwind's `class` strategy). If you use the `media` strategy, replace it with `@media (prefers-color-scheme: dark)`.

Why are colors written as `rgb(59 130 246)` instead of `#3b82f6`?

Tailwind v3 emits colors in space-separated RGB to support the `bg-blue-500/50` opacity-modifier syntax. Both formats are equivalent CSS — you can hex-convert if your codebase prefers hex.

Will it convert `@apply` directives?

Yes, in the sense that pasting the classes inside an @apply block produces the expected CSS. Just paste the class names (without `@apply ...;`).

Developer Utilities · Free tool

Tailwind to CSS

Paste Tailwind class names and get the underlying CSS rules. Useful for emails, PDFs, and non-Tailwind codebases.

Updated June 2026

Tailwind classes

.element {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  padding: 8px 0;
  background-color: white;
  border-radius: lg;
  font-size: 14px;
  font-weight: 600;
}

Found this useful?Email Buy Me a Coffee

What it does

Paste a string of Tailwind utility classes — like flex items-center gap-4 px-6 py-3 bg-blue-600 hover:bg-blue-700 rounded-lg shadow — and get back the equivalent CSS rule set. Useful when you're debugging why a class isn't doing what you expect, when you want to copy a styled component into a project that doesn't use Tailwind, or when you're learning Tailwind and want to see the underlying CSS each utility produces.

The conversion handles the full Tailwind v3 utility surface: spacing (p-4 → padding: 1rem), colors with the v3 palette (bg-blue-600 → background-color: rgb(37 99 235)), flex/grid layout, typography, shadows, transforms, and pseudo-class variants (hover:, focus:, md:, dark:) — variants get wrapped in their corresponding selector or media query in the output.

Useful when migrating off Tailwind, exporting a component to a CSS-Module-only codebase, or just understanding what a long utility chain actually does. Output respects the default Tailwind theme (rem-based spacing, the v3 color palette); custom theme extensions in tailwind.config.js aren't reflected, so this is for vanilla utilities.

Embed this tool on your siteShow snippet

Paste this snippet into any page. Loads on-demand (lazy), no tracking scripts, and sized to most dashboards. Replace the height to fit your layout.

<iframe src="https://freetoolarena.com/embed/tailwind-to-css" width="100%" height="720" frameborder="0" loading="lazy" title="Tailwind to CSS" style="border:1px solid #e2e8f0;border-radius:12px;max-width:720px;"></iframe>

Embed docs →

Example input & output

Input

px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded

Output

padding-left: 1rem;
padding-right: 1rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
background-color: rgb(59 130 246);
color: rgb(255 255 255);
border-radius: 0.25rem;

&:hover {
  background-color: rgb(37 99 235);
}

Tailwind expands shorthand utilities into their full property set — `px-4` is two declarations, `py-2` is two more. The `:hover` variant gets nested as a selector for easy CSS-in-JS use.

How to use it

Paste your Tailwind class string into the input. Whitespace separates classes; you can also paste a multi-line block.
The CSS output regenerates live, organized by selector (base styles, then `:hover`, `:focus`, then media queries).
Click Copy CSS to grab the result. The output is plain CSS — drop it straight into a `.css` file or CSS-in-JS object.
Unknown or custom-theme classes are listed at the bottom with a note — the converter doesn't have access to your tailwind.config.js, so customizations need manual translation.
For a one-off CSS export of an entire component, paste the full className string of the outermost wrapper plus each child's classes line by line.

When to use this tool

Debugging why a particular Tailwind class isn't producing the expected style (you'll see the actual CSS rule).
Migrating a Tailwind component into a non-Tailwind project (vanilla CSS / CSS Modules / styled-components).
Learning Tailwind — see the CSS each utility produces side-by-side.
Documenting a design token's CSS equivalent for a styleguide.

When not to use it

Code that uses arbitrary values (`w-[427px]`, `bg-[#abc123]`) — most arbitrary values pass through correctly, but exotic ones may not parse.
Custom-theme tokens — the tool uses the default Tailwind v3 theme. If your project extends colors or spacing, the output won't reflect those.
Tailwind v4 alpha syntax — output targets v3 conventions. v4 features (CSS-first config, native cascade layers) aren't handled.
Generating production CSS for a real Tailwind site — let Tailwind's own JIT compiler do that. This tool is for translation, not production builds.

Frequently asked questions

Does it know about my custom theme tokens?: No — the tool uses the default Tailwind v3 theme (the colors and spacing scale shipped in `tailwindcss`). If your `tailwind.config.js` extends those, the customizations won't be reflected. Stick to default tokens or manually translate the customs.
What about responsive variants like `md:flex-row`?: Wrapped in `@media (min-width: 768px) { ... }` for `md:`, 1024px for `lg:`, etc. — using Tailwind's default breakpoints. If you've customized them in tailwind.config, the breakpoints in the output will be wrong.
Does it handle dark mode (`dark:bg-slate-900`)?: Yes — wrapped in a `.dark &` selector by default (Tailwind's `class` strategy). If you use the `media` strategy, replace it with `@media (prefers-color-scheme: dark)`.
Why are colors written as `rgb(59 130 246)` instead of `#3b82f6`?: Tailwind v3 emits colors in space-separated RGB to support the `bg-blue-500/50` opacity-modifier syntax. Both formats are equivalent CSS — you can hex-convert if your codebase prefers hex.
Will it convert `@apply` directives?: Yes, in the sense that pasting the classes inside an @apply block produces the expected CSS. Just paste the class names (without `@apply ...;`).

Learn more

Explore more developer utilities tools

100% in-browserNo downloadsNo sign-upMalware-freeHow we keep this safe →