Tailwind to CSS converter and CSS to Tailwind converter
This Tailwind to CSS converter works in both directions. Paste CSS declarations or whole rules and get the matching Tailwind utility classes, or paste a list of Tailwind classes and get the plain CSS they stand for. It runs in your browser from a built-in table, so it is instant, free and private.
The table covers the properties used in most interfaces: layout, flexbox and grid, spacing, sizing, typography, colours, borders, radius, shadows, opacity and position. Values come from the default theme of Tailwind CSS v3.4. When a value has no named utility, the tool writes Tailwind’s arbitrary value syntax such as mt-[13px], and when a property has no utility at all it uses an arbitrary property such as [transition:all_1s]. Every line of the result table says which of these it used.
How to use the CSS to Tailwind Converter
- Choose “CSS to Tailwind” or “Tailwind to CSS”.
- Paste your input. CSS can be bare declarations or full rules with selectors, pseudo-classes such as
:hoverand@media (min-width: 768px)blocks. - Read the converted output and the table that shows each declaration or class with its match type: exact utility, arbitrary value or arbitrary property.
- In CSS mode, tick
@applyto get rules for a component stylesheet. In Tailwind mode, type a selector name to merge all classes into one rule. - Copy the result, or use it as the next input to check the round trip.
CSS to Tailwind Converter features
Exact where Tailwind has a name
Spacing from the 4-pixel scale (16px becomes 4, 10px becomes 2.5), the full 22-colour palette, fractions such as 1/3, font sizes, radii and shadows.
Honest fallbacks
Values off the scale become […] arbitrary values; unknown properties become arbitrary properties. Nothing is silently dropped unless you turn that option off.
Variants and breakpoints
:hover, :focus and friends, sm to 2xl breakpoints, dark: and print: are understood in both directions.
Shorthand aware
padding: 8px 16px becomes py-2 px-4, and a border shorthand becomes width, style and colour classes.
How the mapping works
The numbers come from the Tailwind CSS 3.4 default configuration (stubs/config.full.js and the colours file in the open-source repository, MIT licence), not from memory.
| CSS | Tailwind v3.4 | Note |
|---|---|---|
| padding: 16px | p-4 | Scale step = pixels divided by 4. |
| width: 50% | w-1/2 | Fractions of 2, 3, 4, 5, 6 and 12. |
| font-size: 1.125rem | text-lg | The utility also sets line-height: 1.75rem. |
| color: #3b82f6 | text-blue-500 | Matched against the default palette. |
| margin-top: 13px | mt-[13px] | Off the scale: arbitrary value. |
| transition: all 1s | [transition:all_1s] | No ready-made utility: arbitrary property. |
Limits and Tailwind v4
- Only the default theme is known. Custom colours, spacing or plugins in your
tailwind.config.jsare not read. - Tailwind v4 keeps most class names but renamed some steps (for example
shadow-smbecameshadow-xsandrounded-smbecamerounded-xs) and defines its colours in OKLCH, so check the upgrade guide if you target v4. - The Tailwind to CSS output is plain CSS with resolved values. Tailwind itself emits custom properties for opacity and shadows, and a preflight reset, so a page may look slightly different from the real build.
- Complex selectors, container queries,
max-widthmedia queries and animations are not converted; the tool tells you when it skips a rule. - Use the Tailwind Class Sorter to order the classes you end up with, and the px to rem converter for quick unit checks.
CSS to Tailwind Converter FAQ
How do I convert CSS to Tailwind?
Paste the CSS and read the classes in the output. Each declaration is matched to a utility from the Tailwind v3.4 default theme, and values with no match use the arbitrary [value] syntax.
How do I convert Tailwind classes to CSS?
Switch to “Tailwind to CSS” and paste the classes. You get one rule per class, or a single rule if you type a selector name. Variants such as hover: and md: become pseudo-classes and media queries.
Is the result always exact?
Only where the table says “Exact utility”. Arbitrary values are correct but not part of the theme, and arbitrary properties need Tailwind 3.0 or newer.
Does it support Tailwind v4?
The output targets v3.4. Most utilities are identical in v4, but some names and the colour definitions changed, so review shadows, radii and colours.
Why did a line-height class not appear?
Tailwind text size utilities such as text-lg already include their line-height, so a matching line-height declaration is merged into them.
Is my CSS sent anywhere?
No. The conversion happens entirely in your browser.