CleanorTools
CSS

CSS to Tailwind

Details

How to use CSS to Tailwind

What the tool does, how to run it, and what to expect from the result.

How to convert CSS to Tailwind classes

Migrating hand-written CSS to Tailwind is mostly mechanical: padding becomes p-*, display: flex becomes flex, and font-size: 16px becomes text-base. The parts that are not mechanical (shadows, transitions, anything with a selector) are where the actual thinking is, so the useful thing a converter can do is get the boring 80% out of the way and tell you plainly about the rest.

Paste declarations and this tool emits the utility classes it can map, and lists everything it cannot. It runs in the browser and assumes the default Tailwind theme.

  • Paste the CSS declarations from one rule. Braces and comments are stripped, selectors are ignored.
  • Read the Tailwind classes output and copy it onto your element.
  • Check the Unmapped properties panel. Those need a human, and they are usually shadows, transitions, and transforms.
  • Replace any arbitrary values in square brackets, particularly colours, with tokens from your own theme.
Tips

Getting a better result out of CSS to Tailwind

Specific settings and thresholds, not general advice.

  • The spacing scale is Tailwind's default: 4px maps to 1, 8px to 2, 16px to 4, 24px to 6. A value that is not on the scale does not fail, it becomes an arbitrary value in square brackets, such as p-[13px]. A conversion full of square brackets is a sign your design has no spacing system, which is worth more attention than the conversion itself.
  • Colours are almost always emitted as arbitrary values, such as bg-[#1a1a1a], because a hex code cannot be mapped back to a named Tailwind token without knowing your theme. Replace them with your own semantic tokens (bg-surface, text-muted) rather than shipping the hex.
  • Anything the tool cannot map is listed in the Unmapped panel rather than being silently dropped. That list is the real output: box-shadow, transform, transition, grid-template, media queries, pseudo-selectors, and animations all land there and need a human.
  • It reads plain declarations, and it strips braces and comments before parsing. Paste a full rule and it will convert the declarations and ignore the selector, which means it cannot tell a :hover block from a base block. Convert one state at a time.
  • font-size maps to the named scale (16px to text-base, 24px to text-2xl) but line-height does not come with it, because Tailwind's text-* utilities bundle a default line-height that may differ from your CSS. Check the leading after you convert.
Limits

What CSS to Tailwind does not do

The honest boundary, so you do not lose time finding it yourself.

  • No selectors, media queries, pseudo-classes, or nesting. Declarations only.
  • It assumes the default Tailwind theme. It does not read your tailwind.config.
  • Shorthand with multiple values (margin: 8px 16px) is not decomposed into two utilities.
  • It does not map shadows, transitions, transforms, animations, grid templates, or filters.
At a glance

Who CSS to Tailwind is for

A quick way to understand who this helps, what it solves, and where it connects next.

Best fit

Developers migrating CSS to Tailwind.

Ideal for

Using the css to tailwind without installing anything or signing up.

FAQ

Common questions

Short answers for the questions people usually have before trying a utility like this.

Why are so many properties listed as unmapped?

Because they have no single-utility equivalent, or the mapping depends on your theme. Shadows, transforms, transitions, grid templates, and anything with a selector or a media query all need a human decision. The tool lists them honestly instead of guessing, so the unmapped panel is a to-do list, not an error.

Which Tailwind config does it assume?

The default one. Spacing is the 0.25rem scale (4px = 1), font sizes are the named text-xs through text-6xl steps, and radii are the rounded-sm through rounded-3xl steps. If your project has a custom theme, the class names will be right but the values behind them may not be, so verify visually.

What are the square brackets in the output?

Tailwind's arbitrary value syntax. p-[13px] means padding of exactly 13px, outside the design scale. The tool falls back to it whenever a value has no token. A handful is fine; a wall of them means the CSS you are converting does not sit on any scale, which is worth fixing before you migrate it.

Can I convert a whole stylesheet?

Not usefully. The parser strips braces and treats everything as a flat list of declarations, so a stylesheet with twenty rules produces one undifferentiated string of classes with no idea which selector each belonged to. Convert one rule's declarations at a time.

Should I keep the hex colours it produces?

No. bg-[#1a1a1a] works, and it defeats the point of a design system. Add the colour to your theme once, give it a semantic name, and use that token everywhere. The arbitrary value is a bridge to get you moving, not a destination.

Recommendations

You Might Also Like

Nearby tools from the catalog that fit the same job or workflow.

PTR
UtilityCSS

PX to REM Converter

CSS

Convert px to rem and back with an adjustable root font-size, or batch-convert a whole CSS block. Free, in your browser, nothing is uploaded.

HEX
UtilityColor

Color Format Converter

Convert CSS color formats

Convert one color between HEX, RGB, RGBA, HSL, and HSLA with a live swatch.

CSS
UtilityCSS

CSS Gradient Generator

Generate CSS gradients

Create linear and radial CSS gradients with custom colors and angle. Live preview and copyable CSS, in your browser.

CAG
UtilityCSS

CSS Animation Generator

CSS

Build a CSS keyframes animation visually with presets and timing controls, then copy the code. Free, in your browser, nothing is uploaded.

CBP
UtilityCSS

CSS background pattern generator

CSS

Generate stripe, dot, grid, and checkerboard CSS patterns with color and size controls. Free, in your browser, nothing is uploaded.

CSS
UtilityCSS

CSS Beautifier

Beautify CSS

Format minified or messy CSS into clean, indented rules. Free, in your browser, nothing is uploaded.

Cleanor app

Do it all on your device

Cleanor puts these tools in one app: compress and convert images, video, and audio, work with PDFs, and scan text right on your device. Plus free up storage and clear inbox clutter with Email Cleaner. Start with a free trial.

  • iPhone
  • Android
  • Macsoon
  • Windowssoon
Get it on the App StoreGet it on Google PlayAll platforms & pricing