Skip to main content

CSS to TailwindCSS

Convert CSS styles to Tailwind utility classes

CSS Input

Paste your CSS properties here (one per line)

Tailwind Output

Generated Tailwind utility classes

How to Use

1. Paste your CSS properties in the input area

2. Click "Convert to Tailwind" to generate utility classes

3. Copy the classes and use them in your HTML/JSX

Supported properties:

  • Display (flex, grid, block, inline, none)
  • Flexbox (direction, justify, align, gap)
  • Spacing (padding, margin)
  • Sizing (width, height)
  • Typography (text-align, font-weight)
  • Border radius