Tailwind to CSS Converter

Convert Tailwind utility classes to equivalent CSS — supports spacing, typography, flexbox, colors, and more.

Tailwind classes

1 class not recognized: max-w-5xl

CSS output

.element {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px;
  margin-left: auto;
  margin-right: auto;
  background-color: #ffffff;
  /* [dark] */ background-color: var(--color-gray-900, oklch(from var(--tw-gray-900) l c h));
  color: var(--color-gray-900, oklch(from var(--tw-gray-900) l c h));
  /* [dark] */ color: var(--color-gray-100, oklch(from var(--tw-gray-100) l c h));
  border-radius: 12px;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  border-width: 1px;
  border-color: var(--color-gray-200, oklch(from var(--tw-gray-200) l c h));
  /* [hover] */ box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  transition-property: box-shadow;
  transition-timing-function: cubic-bezier(0.4,0,0.2,1);
  transition-duration: 150ms;
  transition-duration: 300ms;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  line-height: 1.625;
}

About Tailwind to CSS conversion

Tailwind utility classes map almost 1-to-1 to CSS properties. This converter handles spacing (padding, margin, gap, width, height), typography (font-size, font-weight, line-height, letter-spacing), display and flex layout, borders, shadows, transitions, opacity, z-index, and color utilities using Tailwind's default scale. Variants (hover:, dark:, sm:, etc.) are shown as comments — they require CSS selectors or media queries to implement.

For the reverse conversion see CSS to Tailwind. To validate your CSS output see CSS Minifier and CSS Formatter.

Private & free — this tool runs entirely in your browser.