Tailwind to CSS

Convert Tailwind utility classes to equivalent CSS. Debug and understand Tailwind output. Supports common utilities and arbitrary values.

X LinkedIn

Tailwind classes (space-separated)

CSS output

CSS

.element {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
  border-radius: 0.5rem;
  border-width: 1px;
  max-width: 28rem;
}

Supports: display, flex, grid, spacing (p/m/gap), width/height, border, rounded, and arbitrary values like p-[10px] or rounded-[12px]. Not all Tailwind utilities are covered.

Frequently Asked Questions

Yes, conversion runs in your browser with no account needed.

The tool supports common Tailwind v3 utility classes.

Was this helpful?

Related Tools

CSS to Tailwind

Convert CSS styles to Tailwind utility classes

CSS Unit Converter

Convert between CSS units: px, rem, em, pt, cm, mm, in, pc, vh, vw, %

All Tools