CSS to Tailwind Converter

Tailwind CSS builds interfaces from small, composable utility classes instead of hand-written stylesheets — p-4 instead of padding: 16px;, flex items-center justify-between instead of a display: flex rule with three more lines under it. If you're migrating an existing stylesheet to Tailwind, or you just have a CSS snippet from a design tool and want the Tailwind equivalent, retyping every declaration by hand is tedious and easy to get wrong. This tool converts plain CSS declarations into their closest Tailwind utility classes automatically.

How it works

Paste CSS declarations — either bare property: value; pairs or a full .selector { ... } rule block (the selector and braces are stripped automatically) — and the tool walks each declaration and maps it to a Tailwind class:

• Direct keyword properties (display, position, flex-direction, text-align, cursor, and dozens more) map straight to their Tailwind name, e.g. display: flex → flex, position: relative → relative.
• Spacing properties (margin, padding, gap, width, height, top/right/bottom/left, and their per-side variants) are matched against Tailwind's default spacing scale — a quarter-rem (4px) step scale where 16px is exactly 4 units, so padding: 16px becomes p-4. Shorthand values (margin: 0 auto, padding: 8px 16px) are expanded into the smallest matching set of classes (mx-auto, px-4 py-2, etc).
• Colors (color, background-color, border-color) are matched against Tailwind's full default palette (slate, gray, zinc, red, orange, ... down to stone, all 50–950 shades). An exact hex match becomes text-blue-500; anything else falls back to an arbitrary-value class like text-[#123456].
• Font size, font weight, line height, letter spacing, border radius, opacity, z-index, box shadow, transitions and more are matched against their respective Tailwind scales the same way.
• Anything with no direct Tailwind utility (an unusual property, a value outside every scale) is emitted as a /* property: value - No direct Tailwind equivalent */ comment inline with the class list, so nothing is silently dropped.

The result is a single space-separated string of classes (plus any fallback comments) in the same order as your input declarations — ready to paste into a class/className attribute.

How to use it

1. Paste your CSS declarations, or a whole rule block, into the input box.
2. The Tailwind class list generates automatically as you type.
3. Copy the result, or download it as a text file.

FAQ

Does this cover every CSS property? No — this is a best-effort conversion covering the properties Tailwind has direct utilities for (layout, flexbox/grid, spacing, typography, colors, borders, effects, transitions). Properties with no Tailwind counterpart are left as an explanatory comment rather than guessed at.

Why does my color become text-[#123456] instead of a named class? Only hex values that exactly match one of Tailwind's default palette shades resolve to a named class (text-blue-500, etc). Any other hex or RGB value uses Tailwind's arbitrary-value syntax, which is valid CSS-in-class-name and works out of the box with no config changes.

Does this account for a custom tailwind.config.js? No — conversions are based on Tailwind's default theme scales. If your project has customized the spacing, color, or font-size scale, some suggested classes may not match your config; use the arbitrary-value fallback for those and adjust with your own tokens.

Is my CSS sent anywhere? No — everything runs locally in your browser (or, when called through the API, in the request handler only). Nothing is stored.