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.

Developer Gratuito Sem cadastro

CSS to Tailwind Converter

Convert CSS properties to the nearest Tailwind CSS classes

Carregando ferramenta…

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.

Perguntas frequentes

Ferramentas relacionadas

Folha de Dicas do Tailwind CSS

Referência pesquisável interativa para mais de 200 classes de utilitários do Tailwind CSS v3.