CSS to Tailwind CSS Converter
Convert CSS property declarations to Tailwind utility classes — spacing, flex, grid, typography
Paste CSS property declarations (with or without selector braces).
You’re migrating a legacy CSS stylesheet to a Tailwind CSS project and need to translate margin: 16px to m-4, display: flex to flex, and font-size: 14px to text-sm. This tool converts common CSS properties to their Tailwind equivalent classes.
How the Conversion Works
The converter parses CSS declarations (property: value pairs) and maps them to Tailwind utility classes. It handles:
- Spacing — margin, padding with Tailwind’s 4px scale (0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96)
- Typography — font-size, font-weight, line-height, text-align, text-transform
- Colors — maps common CSS color names and hex values to nearest Tailwind colors
- Layout — display, position, overflow, z-index
- Flexbox — flex-direction, justify-content, align-items, flex-wrap, gap
- Grid — display: grid, grid-template-columns, gap
- Sizing — width, height, min-width, max-width with common values
- Borders — border-radius, border-width, border-style
- Backgrounds — background-color mapped to Tailwind bg- classes
Properties without a Tailwind equivalent are returned as a comment with the original CSS.
Limitations
CSS to Tailwind is not a perfect 1:1 mapping. Some CSS values (arbitrary pixel values not on the Tailwind scale, complex gradients, CSS variables) require Tailwind’s arbitrary value syntax: w-[37px], text-[#1a2b3c]. This tool annotates such cases. You should also review the output — context-specific utilities like hover:, focus:, sm: responsive prefixes need to be added manually.
Frequently Asked Questions
What about custom CSS values not in Tailwind’s scale?
Use Tailwind’s arbitrary value syntax in square brackets: p-[13px], text-[#ff6b6b], w-[calc(100%-2rem)]. This tool suggests the arbitrary syntax for unmapped values.
How do I handle media queries in Tailwind?
Tailwind’s responsive utilities use prefixes: sm:, md:, lg:, xl:, 2xl:. Convert @media (min-width: 768px) { ... } blocks to md: prefixed classes.
Does the converter handle shorthand properties like margin: 8px 16px?
Yes. Shorthand values are expanded: margin: 8px 16px becomes my-2 mx-4 (vertical and horizontal).
Can I convert a full CSS block with selectors? The tool accepts bare property declarations. Remove the selector and braces before pasting, or paste just the properties from inside a CSS rule.