CSS to Tailwind
Convert CSS declarations to Tailwind utility classes live — with a converted/unconverted breakdown so you know exactly what mapped.
About this ToolHow it works, benefits & use casesTap to collapse
CSS to Tailwind translates plain CSS declarations into the equivalent Tailwind utility classes. Paste a block of declarations — display, flex-direction, justify-content, align-items, text-align, font-weight, font-size, margin and padding (including per-side variants), width, height, border-radius, and basic colors — and the tool maps each recognized property/value pair to its Tailwind class, joining them into a ready-to-paste className string. It runs live as you type and gives you an honest breakdown: a "mapped" count of what converted plus an "unconverted" list of every declaration it could not translate, so you are never left guessing what was dropped. Spacing values are matched against Tailwind's 4px scale (16px becomes p-4) and font sizes map to the named scale (16px becomes text-base). This is a deliberately basic, lossless-or-flagged converter for common utilities, all computed in your browser for free.
How to Use
- 1Paste your CSS declarations into the input panel (one per line, with or without semicolons), or click "Load example".
- 2Watch the Tailwind class string build live as you edit — no separate parse step is required.
- 3Click "Convert to Tailwind" to confirm; the description shows how many declarations mapped versus were left unconverted.
- 4Copy the generated class string from the output panel straight into your className attribute, or download it as text.
- 5Check the "Unconverted" list below to see which declarations need manual handling or arbitrary values.
Key Benefits
- Maps common layout, flexbox, spacing, typography, sizing, radius, and color properties
- Lists every unconverted declaration so nothing is silently lost
- Shows a live mapped-vs-unconverted count as you type
- Spacing snapped to Tailwind’s 4px scale (e.g. 16px to p-4, 8px to m-2)
- Font sizes mapped to named utilities (12px to text-xs through 36px to text-4xl)
- Per-side margin/padding supported (margin-top to mt-, padding-left to pl-, etc.)
- Output is a clean className string you can paste directly; runs fully in-browser
Common Use Cases
- Porting a hand-written CSS rule into a Tailwind component during migration
- Quickly finding the Tailwind equivalent of a flexbox or spacing declaration
- Spotting which properties in a rule lack a clean utility and need arbitrary values
- Learning the Tailwind naming for properties you already know in CSS
- Converting design-handoff CSS snippets into utility classes for a prototype
Basic conversion. Common layout, spacing, typography, sizing, border & color properties map; complex/custom values are listed as unconverted.
0 characters · live
Copy these into your className attribute
Paste CSS above to convert it live.
Was this tool helpful?
Share Your Experience
Help others discover this tool!
Related tools
- Tailwind Config GeneratorVisually build a Tailwind config - theme extend, colors, spacing, fonts, screens, plugins - and export it as a v3 JS config or a v4 @theme CSS block
- Tailwind to CSS ConverterConvert Tailwind utility classes to plain CSS, expanding responsive prefixes into @media blocks and state variants into pseudo-class rules
- Color ConverterConvert between HEX, RGB, HSL, and HSV
- cURL to Code ConverterConvert cURL commands to code in various languages
- npm to Yarn ConverterConvert npm commands and package-lock.json to Yarn equivalents
- Postman to cURL ConverterConvert Postman requests to cURL commands
It handles a focused set of common utilities: display, flex-direction, justify-content, align-items, text-align, font-weight, font-size, margin and padding (and their per-side variants), width, height, border-radius, color, and background-color. Anything outside this set is reported in the unconverted list rather than mapped.
They are never silently dropped. Each unconvertible declaration is collected and shown in an "Unconverted" section beneath the output, with a count, so you know exactly what to handle manually — often with a Tailwind arbitrary value like p-[18px].