Migrating a stylesheet by hand is slow because the mapping is mechanical but wide. Nobody enjoys remembering that 0.75rem of padding is p-3, that a 500 font weight is font-medium and that justify-content space-between is justify-between. Doing that lookup four hundred times is exactly the work a tailwind utility class generator should absorb.
Everything runs in your browser. The CSS you paste is parsed locally, so an unreleased design system or a client stylesheet never leaves the machine. There is no account, no upload and no size limit beyond the memory of the tab.
Which declarations this CSS to Tailwind converter maps
This CSS to Tailwind converter implements a documented subset rather than pretending to cover the whole language. It handles the properties that make up the overwhelming majority of real stylesheets: the box model, layout, typography, colour, borders, effects and a few interaction properties.
Values are matched against Tailwind's default scale first. A padding of 1rem becomes p-4 because the default spacing scale puts 1rem at step 4. When a value has no scale entry, the converter emits arbitrary value syntax such as p-[13px] instead of rounding to something that would silently change your layout.
- Box model: margin, padding, width, height, min and max sizing.
- Layout: display, position, inset, flex, grid columns, gap, alignment, overflow, z-index.
- Typography: font size, weight, line height, letter spacing, alignment, transform, decoration.
- Colour: text colour, background colour, border colour and opacity.
- Borders and effects: border width, radius, box shadow, outline, cursor.
What it deliberately does not convert
Anything that is not a plain declaration inside a plain rule is left alone and reported. That includes media queries, pseudo classes, pseudo elements, keyframes, CSS variables, nested selectors, grid template definitions written in full, and multi step transitions.
This is a design decision rather than a gap. A media query maps to a responsive prefix such as md: only when you know which breakpoint the query corresponds to in your own configuration, and a hover rule maps to hover: only if it really is a hover state rather than a class toggled by script. Guessing there produces markup that looks right and behaves wrong, so the unmapped list tells you exactly what still needs a human.
How the spacing scale mapping works
Tailwind's default spacing scale is 0.25rem per step, so step 1 is 0.25rem, step 4 is 1rem and step 8 is 2rem. The converter divides your value by 0.25rem and uses the class when the result is a whole number on the scale.
Pixel values are treated as 16 pixels to the rem, which is the browser default. A padding of 16px therefore becomes p-4, and 24px becomes p-6. If your project sets a different root font size, check the generated classes before trusting them, because the arithmetic assumes the default.
Percentages, viewport units and calc expressions never map to the scale. They come back as arbitrary values such as w-[calc(100%-2rem)], which is valid Tailwind and keeps the original meaning intact.
Colours, shadows and arbitrary values
Colour is where a naive conversion goes wrong most often. A hex value like #3b82f6 happens to be blue-500 in the default palette, but in a project with a custom theme that same hex may have no name at all. The converter emits arbitrary colour syntax such as text-[#3b82f6] so the output is always correct, and you can swap in a theme token afterwards.
Box shadows follow the same rule. Tailwind's shadow-sm through shadow-2xl are specific values, not a general shadow system, so an arbitrary shadow is emitted rather than the nearest preset. Being obviously different is better than being subtly wrong.
Using the output in a real migration
Work rule by rule rather than pasting an entire stylesheet at once. Convert one component, move the classes onto the markup, delete the original rule, then check it in the browser before moving on. That keeps every regression traceable to a single change.
Expect the class list to be longer than the declaration list looked, because one shorthand often becomes several utilities. A margin shorthand with four values becomes four classes, and that is correct: Tailwind has no combined shorthand to compress them back into.
Where a rule is used in twenty places, consider whether it should stay a component class instead. Utility first does not mean utility only, and a repeated 15 class string usually means the pattern deserves a name.
Why convert css to tailwind classes at all
The practical argument is dead code. A utility based stylesheet only ships the classes actually used in your markup, so a project never accumulates the layer of unreferenced rules that every mature hand written stylesheet grows.
The second argument is locality. When the styling lives on the element, changing a component means editing one file rather than hunting for which of six selectors currently wins. That trade costs you readable markup, which is the honest downside, and a css migration tool cannot decide whether the trade is right for your team.
| CSS declaration | Tailwind class | Why |
|---|---|---|
| padding: 1rem | p-4 | 1rem is step 4 on the default 0.25rem scale |
| padding: 13px | p-[13px] | No scale entry, so an arbitrary value keeps it exact |
| display: flex | flex | Direct one to one mapping |
| justify-content: space-between | justify-between | Named layout utility |
| color: #3b82f6 | text-[#3b82f6] | Exact colour, since the theme palette is unknown |
| @media (min-width: 768px) | not mapped | Breakpoint depends on your configuration |
How to convert CSS to Tailwind classes
- 1
Paste your CSS
Drop a stylesheet or paste one or more complete rules, including the selector and the braces around each declaration block.
- 2
Choose how output is grouped
Show each selector with its own class list, or flatten everything into a single string when you are converting one element.
- 3
Convert the rules
Press convert. Each declaration is matched against the supported property table and turned into a utility or an arbitrary value.
- 4
Read the unmapped list
Anything the tool cannot express as a utility is listed separately with its original declaration so nothing disappears silently.
- 5
Copy the classes
Copy the generated class string onto your element, then delete the original rule and check the result in the browser.
Related tools worth bookmarking
Sources and further reading
- Tailwind CSS: styling with utility classesThe official documentation for the utility class model and the arbitrary value syntax used in the output.tailwindcss.com
- MDN: CSS referenceProperty by property documentation for the declarations being mapped, including shorthand expansion rules.developer.mozilla.org
- W3C: current CSS specificationsThe authoritative index of CSS modules, useful when checking what a property is actually specified to do.w3.org
Frequently asked questions
Common questions about the css to tailwind converter.
No. A media query only maps to a responsive prefix if the breakpoint matches your Tailwind configuration, and the tool cannot know that. Declarations inside a media query are reported in the unmapped list with the query they came from so you can add the prefix yourself.
Because the value has no entry on the default scale. Emitting p-[13px] keeps your layout pixel identical, whereas rounding to p-3 would quietly move things by a pixel. Replace arbitrary values with theme tokens once you have decided what those tokens should be.
Class names follow the conventions shared by Tailwind version 3 and version 4, including arbitrary value syntax in square brackets. Utilities renamed between major versions, such as the older shadow and rounded defaults, are worth checking against your own version.
No. The parser and the mapping table both run in your browser, so the stylesheet stays on your device. That matters when the CSS belongs to an unreleased product or to a client project covered by an agreement.
It will process every rule you paste, but a large stylesheet produces output nobody can review carefully. Converting one component at a time gives you a working checkpoint after each step and keeps any visual regression attributable to a single rule.