← All Tools
CSS To Tailwind Converter🔒 100% local
Convert CSS to Tailwind classes. Privacy-first, no server uploads, no tracking.
Paste a CSS rule or a run of declarations and each one is looked up in a small translation table: spacing steps (8px becomes 2), font sizes, weights, named colors, display values and about two dozen common properties. Anything without a close utility is returned as an arbitrary value or an arbitrary-property suggestion. The mapping is a lookup table rather than a compiler, so nothing is checked against your Tailwind config.
How to use it
- Paste the rule with or without a selector: .btn { color: blue; padding: 8px 16px; } or just the declarations.
- Press Process - the class list, any properties without a core utility, and a usage snippet are printed together.
- Copy Output and paste the class list onto the element, converting off-scale values to arbitrary values yourself.
Worked example
justify-content: space-between;
opacity: 0.5;becomesConverting 2 declaration(s).
Tailwind classes:
justify-between opacity-50
All properties have core utilities.
Usage:
<div class="justify-between opacity-50">content</div>
Reminder: 1 unit = 0.25rem = 4px. Values outside the default scale become arbitrary values in [brackets].space-between maps to justify-between and 0.5 to opacity-50 - both real stock Tailwind classes.
.btn { color: blue; padding: 8px 16px; }becomesConverting: .btn { … }
Tailwind classes:
text-blue-500 py-2 px-4
All properties have core utilities.
Usage:
<div class="text-blue-500 py-2 px-4">btn</div>
Reminder: 1 unit = 0.25rem = 4px. Values outside the default scale become arbitrary values in [brackets].A two-value padding becomes a py/x pair, and the selector class name is reused in the usage snippet.
When to use it
- You are migrating an existing stylesheet component by component and want a first draft of the class list.
- You keep looking up which Tailwind step 12px maps to and want the answer next to the declaration.
- You want to know which of your properties have no core utility before you start rewriting.
What it does not do
- Padding of 13px becomes p-[13px] with no note that it is off the default scale; only values in the built-in table get clean classes.
- Declarations are split on semicolons, so a value containing a semicolon or a nested block is cut apart rather than parsed as CSS.
- Properties outside the table land in the 'No core utility for' list with arbitrary-property syntax, which needs Tailwind 3.1 or later with just-in-time generation.
- The table targets Tailwind's default scale; a custom theme or config can make the suggested steps wrong for your build.