CSS to Tailwind Converter
Convert CSS properties to equivalent Tailwind CSS utility classes. Covers display, spacing, typography, flexbox, grid, and more. Free, browser-based, instant conversion.
How to Use
- Paste your CSS into the left panel — either bare declarations or full rule blocks with selectors.
- Click Convert to Tailwind (or press Ctrl+Enter / Cmd+Enter).
- Review the Tailwind classes in the right panel. Comments mark unmapped properties.
- Click Copy to copy the output to your clipboard.
Worked Examples
Flexbox card
Input CSS:
.card {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
padding: 1.5rem;
border-radius: 0.5rem;
}Output Tailwind:
/* .card */
flex flex-col items-center gap-4 p-6 rounded-lgTypography
Input CSS:
font-size: 1.125rem;
font-weight: 600;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.05em;Output Tailwind:
text-lg font-semibold text-center uppercase tracking-widerLimitations
This tool uses a built-in mapping table rather than a full CSS parser.
It covers roughly 80% of typical utility-class use cases.
Complex values such as custom colors, multi-value transitions, CSS variables, and calc() expressions are left as /* keep: … */ comments for you to handle manually or convert using Tailwind’s arbitrary value syntax (p-[13px], text-[#ff6600]).
FAQ
What CSS properties are supported?
The tool covers the most common CSS properties: display, position, overflow, flexbox, grid, alignment, spacing (margin/padding/gap), sizing (width/height), typography (font-size, font-weight, text-align), borders, border-radius, opacity, z-index, cursor, and transitions.
What happens to properties that can't be mapped?
Unmapped properties appear as /* keep: property: value */ comments in the output. This way you know exactly which styles need manual attention without losing any information.
Can I paste a full CSS rule with a selector?
Yes. You can paste one or more CSS rule blocks (e.g. .card { ... }). The converter outputs each selector's classes in a comment-labeled group. You can also paste bare declarations without a selector.
Does it support Tailwind v4?
The output uses standard Tailwind utility class names that are compatible with both Tailwind v3 and v4. Arbitrary value syntax (e.g. p-[13px]) is not generated — you can add those manually for values not in the Tailwind scale.