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 免费无需注册

CSS to Tailwind Converter

Convert CSS properties to the nearest Tailwind CSS classes

正在加载工具…

关于此工具

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.

使用方法

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.

关于此工具

使用方法

常见问题