All tools

Tailwind to CSS Converter

Convert Tailwind classes to plain CSS.

.element {
  padding-top: 1rem;
  padding-right: 1rem;
  padding-bottom: 1rem;
  padding-left: 1rem;
  background-color: #3b82f6;
  color: #ffffff;
  border-radius: 0.5rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

Covers spacing, colors, layout, sizing, typography, borders, and shadows. Variant prefixes (sm:, hover:) are stripped before lookup.

About

Paste a string of Tailwind classes (p-4 bg-red-500 rounded-lg etc). Get the equivalent CSS. Useful for porting components out of Tailwind or learning what each class does.

How to use

  1. Paste Tailwind classes.
  2. See the equivalent CSS.

FAQ

Does it handle every Tailwind class?+

It handles the common ones from a default config: spacing, colors, typography, flexbox, grid. Custom values from your config aren't known.