Tailwind ↔ CSS

Enter your CSS properties into the converter and it generates the equivalent Tailwind utility classes. It handles common properties like colors, spacing, typography, shadows, and borders, mapping them to Tailwind's default scale.

The tool generates classes compatible with Tailwind CSS v3 and v4. For v4-specific features like OKLCH colors or container queries, it uses the latest syntax. Classes are also backward-compatible with v3 in most cases.

Yes — when a CSS value doesn't match Tailwind's default scale, the tool uses arbitrary value syntax like w-[347px] or bg-[#1a2b3c]. This works in Tailwind v3+ and keeps your markup fully functional without extending the config.

Use the tool to map your design tokens (colors, spacing, fonts) to Tailwind's config format. It generates the extend section for tailwind.config.js, so you can paste it directly into your project.