tools / code converters / css-to-tailwind

css-to-tailwind

Converts CSS declarations to Tailwind CSS utility classes. Maps standard CSS properties to Tailwind utilities including colors, spacing, typography, layout, borders, and more. Outputs space-separated class strings or @apply blocks.
Runs locally in your browser. Enable JavaScript to use the interactive tool. The practical details remain available below.

What css-to-tailwind actually does

Tailwind's scale is opinionated and CSS is not, so most of the work in this conversion is deciding what to do with a value that has no utility. Two answers are possible: leave it out, or write it as an arbitrary value in square brackets. This tool writes the arbitrary value, because a class list missing a rule is a silent regression and a bracket is visible. The output is grouped by selector, with the selector kept as a comment above its classes, so the mapping can be checked declaration by declaration rather than accepted as a block. What this page does not claim is that the class list is a drop-in replacement. A selector with a combinator, a pseudo-element or a state has no single class list, and a media query becomes a responsive prefix only when its breakpoint matches the scale. Those cases are visible in the output rather than dissolved into it. One correctness note worth stating: until 2026-08-22 this converter refused valid CSS. A declaration block whose last declaration carried no semicolon produced the message that no CSS rules were found, and on a multi-rule sheet the unterminated text leaked into the next selector. Both are fixed, and a stylesheet with no trailing semicolons now converts identically to the same stylesheet with them.

How to use it

  • Paste the CSS, or drop a .css file on the left pane. Nothing leaves this tab.
  • Press Convert, or cmd+enter.
  • Read the classes on the right, grouped under the selector each came from as a comment.
  • Anything in square brackets had no utility on the default scale and was written as an arbitrary value.
  • Use Diff to line up the declarations you gave against the classes you got, and Checks for the line ratio.
  • Edit the class list in place, then copy it. Restore brings back the conversion.

Useful for

  • Move a component from a hand-written stylesheet into a Tailwind project one selector at a time.
  • Find out which of your values are off the default scale, by reading which ones came back in brackets.
  • Translate a snippet from documentation written in plain CSS into the class list your project expects.
  • Audit an existing class list by converting the CSS you meant to write and comparing the two.

Limits worth knowing

  • The mapping targets the default Tailwind scale. A custom theme will name some of the bracketed values, and this page cannot know that.
  • A media query does not become a responsive prefix; it is reported and left for you to place.
  • Keyframes are reported as needing a config entry rather than converted.
  • A selector with a combinator, a pseudo-element or a state is emitted as its comment and its classes; deciding where the classes go is yours.
  • Shorthand is mapped as written. A shorthand that a utility splits differently may need a second look.
  • There is no independent checker for a Tailwind class list, and the Checks tab says so rather than showing a green tick it has not earned.

Questions people ask

undefined

undefined

undefined

undefined

undefined

undefined

undefined

undefined

Continue the workflow

tailwind-to-cssConverts Tailwind CSS utility classes to standard CSS declarations. Parses responsive prefixes (sm:, md:, lg:, xl:), state modifiers (hover:, focus:, active:), and arbitrary values (e.g., m-[17px]). Outputs grouped CSS rules with @media wrappers.scss-to-cssFlattens SCSS into plain CSS by resolving nesting, parent selectors (&), variables, mixins, imports, and control directives. Outputs flat selectors with BEM-style expansion for & variants.css-to-css-modulesConverts global CSS to CSS Modules format. Class selectors kept as-is (local by default). Element/tag and ID selectors converted to class equivalents with warnings. Global resets (html, body) wrapped in :global(). Generates optional JS import map with --with-map flag. Suggests moving @import rules to JS imports.