Micro Tools
Advertisement

CSS to Tailwind

Paste CSS rules and convert each declaration into Tailwind utility classes. Spacing, colors, typography, flexbox and layout map automatically, with notes for anything unmapped.

CSS to Tailwind

Paste CSS rules below.

Advertisement

How the conversion works

Each declaration is matched against a mapping table: display flex becomes flex, margin 16px becomes m-4, font-weight 700 becomes font-bold. Hex colors use Tailwind arbitrary values like bg-[#ffffff], and anything without a utility equivalent is listed in an HTML comment so nothing is silently dropped.

A shortcut for Tailwind migration

Migrating a legacy stylesheet to Tailwind usually means translating hundreds of declarations by hand. Converting rule by rule here gives you a starting class list for each component, which you can paste into your markup and refine.

Related tools

JSON formatterFormat and validate JSON, privately. Regex testerTest regex live with highlighting. Base64 encoderBase64 encode and decode, plus URL encoder and JWT decoder.

CSS to Tailwind FAQs

Which CSS properties are supported?
Layout, spacing, colors, typography, flexbox, borders, border radius, opacity, cursor, position and text transform are mapped. Shorthands like font: and complex values like gradients are reported as unmapped.
How are custom colors handled?
Hex colors become arbitrary values such as text-[#7c3aed]. If your project defines those colors in tailwind.config, swap the arbitrary value for your theme name afterwards.
What does the HTML comment mean?
Lines like <!-- no Tailwind class for: ... --> mark declarations with no utility equivalent. Convert those by hand or with a custom plugin so no styling is lost.
Does it handle media queries?
Media queries are passed through as comments because responsive variants depend on your markup structure. Add sm:, md: or lg: prefixes manually where the design needs them.
Is my CSS uploaded?
No. The mapping runs entirely in your browser, so stylesheets never leave your device.
Advertisement