CSS to Tailwind
Convert CSS declarations into Tailwind utility classes.
[prop:value].CSS to Tailwind converts plain CSS declarations into Tailwind utility classes. It maps the common properties — flexbox, spacing, typography, colors, borders, positioning — to their Tailwind equivalents, converting pixel values onto Tailwind's spacing scale. Anything it doesn't have a named utility for becomes a valid Tailwind arbitrary value, so the output always compiles.
- ✓Maps flexbox, spacing, sizing, typography and colors
- ✓Converts px values onto the Tailwind spacing scale
- ✓Arbitrary-value fallback for anything uncommon
- ✓100% private — nothing is uploaded
How the Mapping Works
Well-known declarations map to their canonical utilities — display: flex becomes flex, padding: 16px becomes p-4(Tailwind's scale is 4px per unit), and font-weight: 600 becomes font-semibold. For properties without a preset, it uses Tailwind's arbitrary-value syntax like [grid-template-columns:1fr_2fr], which is valid Tailwind. Treat the result as a strong starting point you can refine with your design tokens.
What Tailwind's Spacing Scale Actually Is
Tailwind doesn't use raw pixels for spacing utilities — it uses a numbered scale where each step is 0.25rem (4px at the default browser font size). That's why padding: 16px becomes p-4 rather than something like p-16: the number in the class name is the scale step, not the pixel value.
| CSS value | Scale step | Tailwind class |
|---|---|---|
| 4px | 1 | p-1 |
| 8px | 2 | p-2 |
| 16px | 4 | p-4 |
| 24px | 6 | p-6 |
| 32px | 8 | p-8 |
| 13px (off-scale) | — | p-[13px] (arbitrary value) |
How to Use It
- 1Paste a CSS rule or a block of standalone declarations into the input.
- 2Click Convert — each declaration maps to its Tailwind utility, or to an arbitrary-value class like [prop:value] if there's no named utility.
- 3Copy the resulting class list and paste it into your JSX/HTML className.
- 4Review colors and any arbitrary values against your project's design tokens — swap an exact hex like bg-[#1e293b] for a theme color like bg-slate-800 where it's a genuine match.
Common Uses
- ▸Migrating to Tailwind — Convert existing stylesheet rules into utility classes when adopting Tailwind in a project.
- ▸Design-tool exports — Turn CSS copied from a design tool or dev tools inspector into Tailwind classes.
- ▸Learning Tailwind — See the Tailwind equivalent of CSS you already know to build up your mental mapping.
- ▸Quick prototyping — Paste a snippet and get classes to drop onto an element without hunting the docs.
- ▸Code review — Sanity-check that a teammate's raw CSS in a pull request has a clean Tailwind equivalent before merging.
When Arbitrary Values Are the Right Answer
Tailwind's arbitrary-value syntax — square brackets around a property or value, like [mask-type:luminance] or top-[117px]— isn't a fallback to be avoided; it's an intentional escape hatch for the cases a fixed design-system scale can't predict: a pixel-perfect value from a design handoff, a CSS property Tailwind doesn't ship a utility for, or a one-off value that will never repeat elsewhere. Reach for a named utility when the value should follow your design system, and keep the arbitrary form when precision matters more than consistency.