DiffCheck

CSS to Tailwind Converter

Convert plain CSS declarations to equivalent Tailwind CSS utility classes. Get per-property breakdown and copy the full className string.

Tip: you can paste raw declarations or a full selector block.

17/18 properties converted
className
flex flex-col items-center justify-between py-4 px-6 mb-4 w-full text-base font-semibold text-gray-800 bg-blue-50 rounded-lg border-[1px] border-solid border-blue-200 shadow-md opacity-100 cursor-pointer overflow-hidden
Per-property breakdown
displayflex
flex-directionflex-col
align-itemsitems-center
justify-contentjustify-between
paddingpy-4 px-6
margin-bottommb-4
widthw-full
max-widthNo Tailwind equivalent found
font-sizetext-base
font-weightfont-semibold
colortext-gray-800
background-colorbg-blue-50
border-radiusrounded-lg
borderborder-[1px] border-solid border-blue-200
box-shadowshadow-md
opacityopacity-100
cursorcursor-pointer
overflowoverflow-hidden
Note: This converter maps to Tailwind v3 default utilities. Custom values (arbitrary sizes, colors) may need Tailwind's arbitrary value syntax, e.g. w-[347px].

What Is the CSS to Tailwind Converter?

The CSS to Tailwind converter translates plain CSS declarations into equivalent Tailwind CSS utility classes. Paste any CSS — margins, padding, flexbox, grid, typography, colors, borders, shadows — and get the matching Tailwind class names instantly.

Each property is mapped individually in a per-property breakdown table, so you can see exactly what converted and what needs manual adjustment.

How to Use the CSS to Tailwind Converter

  1. Paste your CSS declarations into the input panel (selector blocks are supported).
  2. The converter maps each property to its Tailwind equivalent in real time.
  3. Review the per-property breakdown to see matched and unmatched properties.
  4. Copy the className string and use it directly in your JSX or HTML.

Features

  • 100+ CSS properties mapped to Tailwind utilities
  • Shorthand parsing: margin, padding, border
  • Color mapping: gray, red, blue, green, purple, indigo, pink, orange, yellow palettes
  • Spacing scale: all default Tailwind spacing values (0–96)
  • Typography: font-size, font-weight, line-height, letter-spacing, text-align, text-transform
  • Flexbox and grid: direction, wrap, justify, align, flex-grow/shrink/basis, grid columns
  • Per-property breakdown with notes for unmatched values
  • Conversion coverage counter

FAQ

Does this tool support all CSS properties?

The converter covers the most commonly used CSS properties: layout, spacing, sizing, typography, colors, borders, shadows, opacity, flexbox, grid, and more. Properties with no direct equivalent (complex gradients, custom shadows) show a note suggesting the closest Tailwind approach.

What Tailwind version does this converter target?

The converter targets Tailwind CSS v3. Most class names are also compatible with Tailwind v2 and v4.

Can I convert a full CSS selector block?

Yes. Paste either raw declarations or a full selector block like .card { padding: 16px; }. The tool strips comments and selector wrappers and parses only the declarations.

What if a CSS value has no Tailwind equivalent?

Use Tailwind's arbitrary value syntax: w-[347px], text-[13px], bg-[#1a2b3c]. This is fully supported in Tailwind v3 and later and covers any value not in the default scale.