CSS to Tailwind Converter

Paste CSS and map each declaration to Tailwind utility classes, with every unmapped declaration listed honestly — entirely on this device.

0 bytes uploaded

Off-scale values

Arbitrary [value]List as unmapped

Maps a documented subset to Tailwind v3.4 utility classes. Unmapped declarations are listed, never dropped.

Input — paste CSS

Tailwind utilities

Paste CSS to see the matching Tailwind utilities as you type.

0 B

Press ? for shortcuts

Do it offline:$

How to use it

Paste a stylesheet, or drop a .css file that stays on your machine; past a couple of megabytes the conversion waits for a button press.
Read the utilities grouped under each selector — that class string is what goes on the element in your markup.
Check the unmapped list beneath the classes: each declaration with no utility is printed with the reason it was skipped.
Switch off-scale handling between arbitrary [value] utilities and a plain unmapped entry, to taste.
Copy the class list, download it as a .txt file, or share the pasted CSS as a permalink.

Paste a stylesheet and this page rewrites each declaration as Tailwind v3.4 utility classes, grouped under their selector, inside a Web Worker on your machine. Values that sit on Tailwind's scale map by name; off-scale ones become arbitrary utilities you can switch off. Anything without a utility is listed underneath, so the conversion loses nothing and nothing you paste is sent anywhere.

How it works

The parser is css-tree, loaded as its own chunk and run inside a Web Worker, so a large sheet is read without blocking the page. The converter walks each rule in source order, mapping its declarations and turning the selector into a variant prefix such as hover: or md: when one exists.

Each declaration is looked up in a hand-authored table built from the Tailwind v3.4 default theme — the 4px spacing scale, the named palette, the display and flex keywords. The table is a documented subset, not every property, so a declaration it cannot place joins the unmapped list instead of being guessed at.

Values between scale steps, such as a 13px padding, become arbitrary utilities like p-[13px] when off-scale handling is on, and unmapped entries when it is off. Everything targets Tailwind v3.4: scale, palette and important prefix are pinned to that release, so class names match a v3.4 build.

Examples

.card{display:flex;flex-direction:column;gap:12px;padding:16px}

/* .card */
flex flex-col gap-3 p-4

Four declarations become four utilities: display:flex is flex, flex-direction:column is flex-col, gap:12px is gap-3 (the third step of the 4px scale), and padding:16px is p-4.

.box{padding:13px}

/* .box */
p-[13px]

Thirteen pixels is not a step on the 4px scale, so with off-scale handling on it becomes the arbitrary utility p-[13px]; turn the toggle off and it is listed as unmapped instead.

.alert{color:#ef4444;background-color:#fff}

/* .alert */
text-red-500 bg-white

The hex #ef4444 is exactly red-500 in the v3.4 palette, so color maps by name to text-red-500, and #fff shortens to bg-white.

.masked{mask-image:url(#m)}

/* .masked */
/* unmapped: mask-image: url(#m) — no Tailwind mapping */

There is no Tailwind utility for mask-image, so rather than invent one the converter lists it under the selector as an unmapped comment.

Every example on this page is executed against the same engine that powers the tool, on every build.

Gotchas worth knowing

A documented subset, not every property

The table covers common layout, spacing, sizing, typography, color, border and effect properties; rarer declarations have no entry and join the unmapped list, so coverage is honest about where it stops.

Pinned to Tailwind v3.4

Class names, the spacing scale and the palette follow the v3.4 default theme. Tailwind v4 re-scaled parts of the system and is out of scope, so paste into a v3.4 project for an exact match.

CSS red is not Tailwind red-500

The keyword red is #ff0000, while Tailwind's red-500 is #ef4444. Being different colors, a bare color:red converts to the arbitrary utility text-[red] with that reason attached, never text-red-500.

!important becomes a ! prefix

A declaration marked !important keeps its weight as Tailwind's v3.4 important marker: padding:16px !important converts to !p-4, and the ! follows any variant, as in md:hover:!p-4.

SCSS and LESS are detected, not compiled

Paste preprocessor source and a notice says the input looks like a dialect; variables, mixins and nesting are not expanded, so run it through a formatter to plain CSS first.

Some selectors have no variant

Combinators, attribute selectors and functional pseudo-classes like :nth-child(2) cannot become a Tailwind variant. Their declarations still map, but the utilities are listed unprefixed and the original selector is kept as a comment.

Common errors

Colon is expected at line 1, column 9.: A colon has to sit between a property and its value. Written as color red, the parser runs out of road before any value and marks the spot; css-tree recovers the rest, so a following padding:16px still converts to p-4.
Input is larger than the 5 MB limit for this tool.: Input is capped at five megabytes so a browser tab never stalls. Split a very large stylesheet into smaller groups of rules and convert them one batch at a time.
This looks like SCSS or LESS — only plain CSS is mapped to Tailwind utilities.: A $variable, an @mixin or a // comment triggers this notice. Plain-CSS rules beside it still convert, but dialect-only syntax is reported, not expanded.

FAQ

Does it convert every CSS property?

No — it maps a documented subset of common properties to their Tailwind v3.4 equivalents. A property outside that subset is never guessed at; it goes to the unmapped list under its rule, so you see what still needs a hand.

Which Tailwind version does it target?

Tailwind v3.4 and its default theme. The spacing scale, palette and important prefix follow that release, so the output drops into a v3.4 setup without renaming; a v4 project may expect different class names.

What happens to values not on Tailwind's scale?

With off-scale handling on they become arbitrary utilities in square brackets, such as a 13px padding as p-[13px]. Switch it off and those values are listed as unmapped instead.

Keyboard shortcuts

⌘/Ctrl + Enter: Convert the CSS now; required for very large input.
⌘/Ctrl + S: Download the Tailwind utilities as a .txt file.
⌘/Ctrl + C: Copy the whole class list when nothing is selected.
⌘/Ctrl + Shift + C: Force-copy the output even mid-selection.
t: Flip between the light and dark themes; ignored mid-typing.
? or ⌘/Ctrl + /: Open the shortcut list in a dialog.
Esc: Hide the help overlay and return to the converter.

Nothing you paste here leaves this tab. State only ever travels in links you explicitly create.

Tailwind CSS v3.4 — Utility-first fundamentals · Tailwind CSS v3.4 — Using arbitrary values · css-tree — CSS parser, lexer and generator (GitHub)

Last reviewed: 2026-08-10