CSS to Tailwind Utility Converter
Paste raw CSS — including shorthand, pseudo-classes, and media queries — and get idiomatic Tailwind utility classes back, instantly and entirely in your browser.
Paste CSS
On: 16px becomes p-4. Off: always outputs exact arbitrary values like p-[16px].
.btninline-flex items-center justify-center gap-2 py-3 px-6 bg-[#FF5B04] text-[#ffffff] text-sm font-semibold rounded-lg border-none cursor-pointer transition-colors duration-200
display: inline-flexinline-flexScale Matchalign-items: centeritems-centerScale Matchjustify-content: centerjustify-centerScale Matchgap: 8pxgap-2Scale Matchpadding: 12px 24pxpy-3 px-6Scale Matchbackground-color: #FF5B04bg-[#FF5B04]Arbitrary Valuecolor: #fffffftext-[#ffffff]Arbitrary Valuefont-size: 14pxtext-smScale Matchfont-weight: 600font-semiboldScale Matchborder-radius: 8pxrounded-lgScale Matchborder: noneborder-noneScale Matchcursor: pointercursor-pointerScale Matchtransition-property: background-colortransition-colorsScale Matchtransition-duration: 200msduration-200Scale Match.btn:hoverhover:bg-[#E54F00]
background-color: #E54F00bg-[#E54F00]Arbitrary Value.btn:disableddisabled:opacity-50 disabled:cursor-not-allowed
opacity: 0.5opacity-50Scale Matchcursor: not-allowedcursor-not-allowedScale MatchFull Export
/* .btn */ inline-flex items-center justify-center gap-2 py-3 px-6 bg-[#FF5B04] text-[#ffffff] text-sm font-semibold rounded-lg border-none cursor-pointer transition-colors duration-200 /* .btn:hover */ hover:bg-[#E54F00] /* .btn:disabled */ disabled:opacity-50 disabled:cursor-not-allowed
How This Converter Works
Every CSS declaration you paste is resolved through three tiers, tried in order, so nothing is ever silently dropped — only shortened when a clean match exists.
Named Utility Classes
If a value lines up with Tailwind's default design scale — 16px padding, 8px radius, 700 font weight — it becomes a short, semantic class like p-4, rounded-lg, font-bold.
Custom Values, Known Utility
A value like 13px padding doesn't exist on Tailwind's scale, but padding itself is a known utility — so it converts to p-[13px] using Tailwind's official bracket syntax instead of rounding to the nearest step and silently changing your design.
Anything Tailwind Doesn't Name
Properties with no Tailwind utility at all — mask-type, vendor prefixes, exotic CSS — fall back to Tailwind's arbitrary property syntax: [mask-type:luminance]. It's valid, real Tailwind — just less common knowledge.
What This Converter Understands
Shorthand expansion
padding, margin, border-radius, and border shorthand are decomposed into their per-side/per-corner Tailwind classes — or collapsed to px-/py- when both axes match.
Border-radius corner order
CSS border-radius reads top-left → top-right → bottom-right → bottom-left, not the top/right/bottom/left order padding and margin use. This converter applies the correct order automatically.
Pseudo-class variants
:hover, :focus, :active, :disabled, :first-child, ::before, ::after and more map to Tailwind's hover:, focus:, disabled: variant prefixes.
Media query breakpoints
@media (min-width: 768px) maps to Tailwind's sm:/md:/lg:/xl:/2xl: prefixes using the same default breakpoint scale.
Percentages as fractions
width: 50% becomes w-1/2, width: 33.333% becomes w-1/3 — matching Tailwind's built-in fraction scale instead of falling back to arbitrary values.
!important and negative values
color: red !important becomes !text-[red]; margin-top: -8px becomes -mt-2, following Tailwind's own negative-value convention.
Known Limitations
This runs entirely in your browser with a lightweight parser, not a full CSS AST — it's built for component-level CSS (buttons, cards, nav bars), not entire stylesheets. A few things it intentionally doesn't attempt:
- Native CSS nesting (
&selectors) — flatten your rules first. - Gradients, background images, and multi-function
transformvalues are preserved exactly via arbitrary property/value syntax rather than decomposed into multiple utilities. - Colors always convert to arbitrary values (
bg-[#ff5b04]) rather than guessing the nearest built-in Tailwind shade — guessing can silently shift your brand color. - Complex selectors like
:nth-child(2n+1)aren't mapped to a variant; they're flagged so you can add it manually.
Step-by-Step: How to Use This Converter
Paste your CSS
Paste one or more rules, including pseudo-classes and @media blocks — or just a bare declaration list with no selector at all.
Choose your scale preference
Leave 'Prefer Tailwind's Default Scale' on for the shortest, most idiomatic output. Turn it off when you need pixel-perfect fidelity to the original design.
Read the per-rule breakdown
Each original selector gets its own card showing the exact Tailwind classes, plus a property-by-property table so you can sanity-check every conversion.
Copy classes into your component
Use the per-rule 'Copy classes' button for a single element, or 'Copy All' to grab every converted rule at once, commented by original selector.
Frequently Asked Questions
What is Tailwind's arbitrary value syntax?
Square-bracket syntax like p-[13px] or bg-[#ff5b04] lets you use a one-off CSS value with a Tailwind utility, without adding it to your config. It's an official, fully-supported part of Tailwind CSS v3 and v4.
What's the difference between arbitrary values and arbitrary properties?
Arbitrary values (p-[13px]) customize the value for a utility Tailwind already knows about. Arbitrary properties ([mask-type:luminance]) let you use a raw CSS property Tailwind has no utility for at all — both compile to real, valid CSS.
Why do colors always come out as bg-[#hex] instead of bg-orange-500?
Matching a hex value to the 'nearest' built-in Tailwind color is a guess, and a wrong guess silently changes your brand color. Arbitrary values preserve your exact color every time — swap in a design token yourself if you have one.
Can I paste an entire stylesheet?
You can, but this tool is tuned for component-level CSS — a button, a card, a nav bar. Very large stylesheets with deep nesting or hundreds of rules will still parse, but the output is easier to review in smaller chunks.
Does this handle Sass or LESS syntax?
No — paste compiled, plain CSS. Nesting (&), variables ($var), and mixins aren't understood by the parser.
Suggested Tools for Your Stack
Explore related utilities in this workflow or discover cross-category tools.
Related in Design Systems & Code
SaaS Design Token & Theme Studio
Generate 8pt spacing scales, typography ramps, and export to Tailwind v3/v4 & Figma JSON.
Accessible SaaS Color Palette Generator
Generate harmonious 10-shade UI color ramps (50–950) with automated WCAG contrast validation.
Recommended from Other Categories
SaaS UX & Friction Audit
0–100 Product Experience Score across onboarding, IA, visual hierarchy, and navigation.
SaaS Pricing Page & Psychology Analyzer
Audit tier differentiation, annual toggle psychology, feature comparison, and objection handling.