CSS to Tailwind

CSS to Tailwind Converter

Paste CSS and get the Tailwind classes for each selector. Spacing, sizes, type, flexbox, grid, borders and radius map to their utilities, :hover and ::before become variants, media queries become sm:, md: or max-[600px]:, and anything without a utility becomes an arbitrary value.

How do I use the CSS to Tailwind?

1. Paste CSS rules.
2. Pick Tailwind 4 or 3, and classes or @apply rules.
3. Copy the classes into your markup, or the @apply rules into a stylesheet.

What does the CSS to Tailwind do?

• Tailwind 4 and 3
• Media queries as breakpoints, dark: and print:
• :hover, :focus and ::before as variants
• !important kept
• Arbitrary values instead of dropping anything
• @apply output

Frequently asked questions

Why are some classes in square brackets?

Those values have no utility in Tailwind's default theme, like a 520px width or a brand colour, so they're written as arbitrary values. Add them to your theme to get named classes.

Is my code uploaded?

No. The conversion runs in your browser; your code stays on your device.

More JSON tools

Bracely has 98 JSON tools in one page. Related ones:

• SQL formatter
• HTML formatter
• CSS formatter
• JavaScript formatter
• TypeScript formatter
• Code screenshot
• HTML to JSX
• SVG to JSX
• JSON Formatter
• JSON Validator
• JSON Viewer
• JSON Repair
• JSON Diff
• JSON to YAML
• JSON to CSV
• jq Playground

Runs entirely in your browser. Nothing you paste is uploaded. Made by Saurabh Pagrut · About · Privacy policy
Last updated 22 October 2026 · Version 5.5 · Changelog
Saurabh Pagrut on GitHub · LinkedIn · X · YouTube · Instagram