CSS → Tailwind Converter
Free online CSS to Tailwind converter — paste CSS rules and get equivalent Tailwind utility classes. Unmapped properties are listed separately.
These CSS properties have no direct Tailwind equivalent:
- Paste your CSS rules into the input area (one or more class blocks).
- Click Convert to Tailwind.
- Mapped properties appear as Tailwind classes. Unmapped ones are listed below for manual handling.
- Copy the classes to use in your HTML.
FAQ
What CSS properties are supported?
Common layout properties (display, flex, grid, position), spacing (padding, margin), sizing (width, height), typography (font-size, font-weight, color), borders, shadows, and more — covering the ~80 most-used CSS properties.
What about properties without a Tailwind equivalent?
CSS properties that don't map to Tailwind utilities (custom values, CSS variables, complex animations) appear in the "Unmapped Rules" section so you can handle them manually.
Does it handle multiple CSS rules?
Yes. Paste multiple CSS class blocks and each selector's equivalent Tailwind classes will be shown separately.
Does it support Tailwind v4?
The output uses standard Tailwind utility class names which are compatible with both v3 and v4.