What CSS properties are supported?

The converter handles spacing (margin, padding), display, position, flexbox, CSS Grid, width, height, font size, font weight, line height, text align, color, background-color, border, border-radius, box-shadow, opacity, overflow, and z-index.

What does the confidence level mean?

'Exact' means Tailwind has a built-in class for this exact value. 'Approx' means the nearest scale step was used. 'Custom' means a CSS variable or arbitrary-value class (e.g. w-[123px]) would be needed and is shown as a suggestion.

What happens to unsupported properties?

Any CSS property that cannot be mapped to a Tailwind class is listed in the 'Unsupported' section so you can handle it manually or with Tailwind's arbitrary-value syntax.

Does it handle shorthand properties?

Yes. Shorthand properties like 'margin: 8px 16px', 'padding: 4px 8px 12px 16px', and 'border: 1px solid #e5e7eb' are expanded and each part is mapped individually.

CSS to Tailwind Converter

Sobre esta ferramenta

Paste any block of CSS declarations and instantly see the equivalent Tailwind CSS utility classes. Covers spacing (margin, padding), display, flexbox, CSS Grid, text and font properties, colours, borders, shadows, and more. Each mapping shows a confidence level so you always know when a class is an exact match versus the closest approximation. Unknown or unsupported properties are flagged separately so nothing is silently dropped.

Como usar

1 Paste your CSS declarations into the input area (e.g. 'margin: 16px; display: flex;').
2 Click 'Convert' — the tool parses each property and finds the closest Tailwind class.
3 Review the results table showing property, Tailwind class, and confidence level.
4 Click 'Copy Classes' to copy all classes as a space-separated string ready to use in HTML.

What "converting CSS to Tailwind" really means

Tailwind CSS is a utility framework: instead of writing margin: 16px in a stylesheet, you add a pre-built class like m-4 to your markup. Each utility corresponds to one value on Tailwind's design scale. Converting CSS to Tailwind therefore means looking up each declaration in those scales and finding the class that produces the same result. This tool automates the lookup for the most common properties — spacing, display, flexbox, grid, typography, color, borders, shadows, sizing, and more — and tells you how confident the match is.

It parses your input by stripping comments, splitting on semicolons, and reading each property: value pair. Everything runs in your browser; nothing is uploaded.

The spacing scale is the key idea

Tailwind's spacing unit is 4px. One unit (1) is 4px, so 16px ÷ 4 = 4 gives the class m-4 for margin: 16px. The tool keeps an exact table for the standard steps (0, 1px, 2px, 4px, 8px, 12px, 16px, and on up to 384px) and labels those matches Exact. For an off-scale value like 15px, it divides by 4, rounds to the nearest half-step, and labels the result Approx so you know it is close but not pixel-perfect. Shorthand is expanded the way CSS does: padding: 8px 16px becomes py-2 px-4 (vertical then horizontal), and a four-value shorthand becomes top, right, bottom, left.

A worked example

Paste this block:

display: flex; → flex (Exact)
justify-content: center; → justify-center (Exact)
align-items: center; → items-center (Exact)
padding: 8px 16px; → py-2 px-4 (Exact)
color: #3b82f6; → text-blue-500 (Exact)
border-radius: 8px; → rounded-lg (Exact)

The tool also prints the whole set joined together — flex justify-center items-center py-2 px-4 text-blue-500 rounded-lg — ready to copy straight onto an element.

How the confidence labels work

Label	Meaning	Example
Exact	The value matches a Tailwind scale value precisely	`16px` → `m-4`
Approx	Rounded to the nearest scale step	`15px` → `m-3.5`
Custom	No scale value fits; an arbitrary-value class is produced	`color: #abc123` → `text-[#abc123]`

Colors map to Tailwind's named palette only when the HEX matches one of its defaults exactly — for instance #3b82f6 is blue-500 and #ef4444 is red-500. The mapping understands three-digit HEX (#fff expands to #ffffff → white) and the keywords white, black, and transparent. Any other color falls through to the bracketed arbitrary-value syntax, which Tailwind supports natively.

Beyond spacing: what else gets mapped

The converter handles far more than margins and padding. Flexbox properties become their utilities (justify-content: space-between → justify-between, align-items: center → items-center), and display: flex, grid, and none map to flex, grid, and hidden. Grid columns written as repeat(3, 1fr) collapse to grid-cols-3. Font sizes follow Tailwind's named scale (14px → text-sm, 24px → text-2xl), font weights map by both number and keyword (600 or semibold → font-semibold), and border radius, box-shadow, opacity, z-index, overflow, and cursor each have their own lookup. Opacity is snapped to the nearest 5% step Tailwind ships, so opacity: 0.47 becomes opacity-45, flagged Approx.

Common use cases

The biggest payoff is migrating an existing component: drop its CSS rule body in and get a class list to paste onto the markup. It is also a fast way to learn the framework — seeing justify-content: space-between become justify-between teaches the naming convention by example. And when you are mid-flow and cannot remember whether 24px is p-6 or p-5, a one-line paste answers it instantly. Teams adopting Tailwind on a legacy codebase often run rule after rule through it to build muscle memory for the utility names.

Tips and common mistakes

Paste declarations, not full rules. The parser reads property: value; pairs. Leave out the selector and the braces (.btn { ... }) and just paste what is inside.
Watch the Unsupported list. Properties the tool does not map — animations, gradients, transforms, pseudo-states like :hover — are listed separately rather than guessed at. Those need manual Tailwind equivalents.
Approx is a hint to redesign, not a defect. An off-scale value usually means the original design drifted off the 4px grid. Snapping to the nearest step often improves visual rhythm; use an arbitrary value only when the exact pixel matters.
Custom colors bloat your markup. A long run of bg-[#1a2b3c] classes is a sign you should add those colors to your Tailwind config and reference them by name instead.
Shorthand order matters. Two-value spacing is interpreted as vertical then horizontal, exactly as CSS does; do not swap them.