Which Tailwind utilities does the converter understand?

A broad set: spacing (m/p/gap on the rem scale), sizing (w/h/min/max with keywords and fractions), the full default color palette for bg/text/border, typography (font size, weight, line height, tracking, alignment, transform, decoration), flexbox and grid, position and inset, display, border width/style/radius, box shadow, opacity, z-index, overflow, and transitions. Unknown or arbitrary-value classes are listed separately rather than dropped.

How are responsive prefixes like md: handled?

A responsive prefix wraps its declaration in the matching min-width media query: sm: becomes @media (min-width: 640px), md: becomes 768px, lg: 1024px, xl: 1280px, and 2xl: 1536px. So md:flex produces a media block containing display: flex on your selector, mirroring how Tailwind applies utilities from a breakpoint upward.

What happens with state variants like hover: and focus:?

State prefixes become real pseudo-class rules. hover:bg-blue-500 emits a .element:hover { background-color: #3b82f6; } rule, and focus:, active:, disabled:, checked:, and similar variants map to their corresponding pseudo-classes. You can combine them with a breakpoint, for example md:hover:flex, and the rule is placed inside the media block with the hover selector.

Can I change the selector the CSS is attached to?

Yes. The default selector is .element, but you can set it to anything - a class like .card, an id like #hero, or a tag. All base declarations are grouped into a single rule for that selector, and any variant rules use the same selector with the appropriate media query or pseudo-class suffix.

Are colors output as hex or as CSS variables?

Colors are resolved to their real hex values from the default Tailwind palette, so bg-blue-500 becomes background-color: #3b82f6 and text-gray-700 becomes color: #374151. Named colors like white, black, and transparent are handled too. This makes the output drop-in usable without defining any custom properties.

What shows up in the "Unrecognised classes" list?

Any class that does not match a known utility or pattern - arbitrary values such as p-[13px], plugin classes, or less common utilities - is collected and shown as badges with a count. The base utilities still convert; only the unmapped ones are set aside so you can handle them by hand.

Tailwind to CSS Converter

Convert Tailwind utility classes into equivalent plain CSS. Covers spacing, sizing, the full color palette, typography, flex and grid, position, borders, shadows, opacity and more. Responsive prefixes become @media blocks and state variants like hover: and focus: become real pseudo-class rules, all wrapped in a selector you choose. Live output with copy and share.

About this ToolHow it works, benefits & use cases

Paste a string of Tailwind utility classes and see the equivalent plain CSS instantly. This converter maps a broad slice of the framework: spacing (margin, padding, gap) on the rem scale, sizing with keywords and fractions, the full default color palette resolved to real hex values, typography (font size, weight, line height, letter spacing, alignment, transform), flexbox and grid, position and inset, display, border width and style, border radius, box shadow, opacity, z-index, overflow, and transitions. Crucially it understands variants - a responsive prefix like md: wraps its declarations in a matching @media (min-width: 768px) block, and state prefixes such as hover:, focus:, active:, and disabled: become proper pseudo-class rules - while every base utility is grouped into one tidy rule. You choose the selector the rule is attached to (.element by default, or anything like .card or #hero), and any class the tool cannot map is listed under "Unrecognised classes" so nothing disappears silently. The output updates live, and you can copy, download, or share it.

How to Use

1Paste a space-separated list of Tailwind classes into the input, or click an example.
2Set the CSS selector the generated rule should attach to (defaults to .element).
3Read the live CSS output - base utilities are grouped into one rule, variants get their own @media or :pseudo rules.
4Check the "Unrecognised classes" badges for any utilities that could not be mapped.
5Copy, download as styles.css, share the link, or pipe the CSS into another tool.

Key Benefits

Broad utility coverage: spacing, sizing, color, typography, flex, grid, borders, shadows, and more
Resolves the full Tailwind color palette to real hex values, not variable placeholders
Responsive prefixes become @media (min-width) blocks automatically
State variants like hover: and focus: become real pseudo-class rules
Configurable selector so the output drops straight into your stylesheet
Flags unrecognized classes instead of silently dropping them
Live output you can copy, download, share, or pipe onward

Common Use Cases

Porting a Tailwind component to a project that uses plain CSS or CSS modules
Understanding exactly what a dense className string compiles to
Teaching the CSS behind common utility classes, including responsive and hover states
Extracting a baseline rule to refactor into a custom component class
Debugging spacing, layout, or breakpoint behavior by reading the underlying values

Live CSS

CSS output

A complete CSS rule for your selector, with @media and :pseudo rules for variants

Type some Tailwind classes to see the CSS.

Tailwind classes

Paste a space-separated list of utility classes

Output selector

CSS selector

The generated rule(s) attach to this selector, e.g. .card or #hero.

Examples

Variants become real CSS

Responsive prefixes like md: wrap their declarations in a matching @media (min-width) block, while state prefixes such as hover: and focus: emit proper :pseudo-class rules. Base utilities are grouped into a single rule.

Nothing fails silently

Any class the converter does not recognise (arbitrary values, less common utilities) is listed under Unrecognised classes so you can handle it manually rather than wondering why it vanished.

Was this tool helpful?

Share Your Experience

Help others discover this tool!

Share on

Related guide

Guide · 14 min readTailwind CSS v3 to v4: The Complete Migration Guide (2026)Tailwind v4 is a ground-up rewrite. The upgrade tool handles most of it, but the CSS-first config, the renamed utilities, the rebuilt dark mode, and the browser-support floor are where teams get stuck. Exactly what changed and how to move across cleanly.Read the guide

Tailwind to CSS Converter

How to Use

Key Benefits

Common Use Cases

Output selector

Examples

Variants become real CSS

Nothing fails silently

Was this tool helpful?

Share Your Experience

Related guide

Related tools

Frequently Asked Questions - Tailwind to CSS Converter