CSS to Tailwind Converter

Convert raw CSS properties and values to equivalent Tailwind CSS utility classes. Paste CSS, get Tailwind classes. Supports shorthand expansion, spacing scale, and color matching.

Coming Soon

We are currently building this tool. Check back shortly!

How to use CSS to Tailwind Converter

1
Paste your CSS declarations into the input area.
2
The converter maps each property to the closest Tailwind utility class.
3
Review the output classes and any unmapped properties shown in red.
4
For values with no direct Tailwind class, arbitrary value syntax is suggested.
5
Copy the Tailwind classes to use in your HTML.

Frequently Asked Questions

What CSS properties can be converted to Tailwind?

Most common properties including display, flexbox, grid, padding, margin, colors, fonts, borders, shadows, and opacity. Complex or non-standard values use Tailwind arbitrary value syntax.

What happens with values not in the Tailwind scale?

Non-standard values use Tailwind's arbitrary value syntax: p-[13px], text-[17px], text-[#custom-hex]. These still work with Tailwind's JIT compiler.

Can I use this to migrate a full stylesheet to Tailwind?

Yes, but convert component by component. Very complex or unique styles (animations, pseudo-elements) are better as custom CSS in @layer components {} rather than Tailwind classes.

Detailed Guide

Why Convert CSS to Tailwind?

Whether you're migrating an existing project to Tailwind, translating a Figma design's exported CSS, or learning what Tailwind class corresponds to a CSS property you know — a CSS-to-Tailwind converter saves significant time.

Instead of keeping a mental map of every Tailwind utility, paste the CSS and get the classes.

How the Conversion Works

The converter parses your CSS property-value pairs and maps them to the closest Tailwind utility class:

Direct mappings (one-to-one):

/* CSS Input */
display: flex;          →  flex
align-items: center;    →  items-center
justify-content: space-between; →  justify-between
font-size: 0.875rem;    →  text-sm
font-weight: 600;       →  font-semibold
color: #6366f1;         →  text-indigo-500 (nearest palette match)
padding: 1rem;          →  p-4
margin-top: 0.5rem;     →  mt-2
border-radius: 0.5rem;  →  rounded-lg

Shorthand expansion:

/* CSS Input */
padding: 1rem 2rem;  →  py-4 px-8
margin: 0 auto;      →  mx-auto my-0

Complex properties (with arbitrary values):

/* CSS Input */
font-size: 17px;     →  text-[17px]
padding: 13px;       →  p-[13px]
color: #ef4444;      →  text-red-500  (or text-[#ef4444] if no match)

Tailwind's Spacing Scale

Tailwind's spacing system maps numbers to rem values:

Tailwind	CSS Value
`1`	0.25rem (4px)
`2`	0.5rem (8px)
`4`	1rem (16px)
`6`	1.5rem (24px)
`8`	2rem (32px)
`12`	3rem (48px)
`16`	4rem (64px)

Converting padding: 20px would suggest p-5 (1.25rem = 20px at 16px base font).

What Can't Be Directly Converted

Some CSS has no direct Tailwind equivalent and requires the arbitrary value [...] syntax or a custom config extension:

Non-standard values: font-size: 13.5px → text-[13.5px]
Complex box-shadows: Multi-layer or custom shadows → shadow-[your-value]
CSS variables: color: var(--brand-color) → may map to text-[--brand-color] in v3+
Pseudo-element content: ::before { content: '→' } — no Tailwind utility, must be custom CSS
CSS animations: Complex @keyframes → require tailwind.config.js customization

Migrating Legacy Projects

When migrating an existing CSS codebase to Tailwind:

Convert component by component, not all at once. Start with simple, isolated components.
Keep your original CSS as a reference — don't delete it until the Tailwind version ...

Looking for a more detailed deep-dive and advanced tips?

Read Full Article on our Blog