Open menu

Tailwind to CSS Converter

Translate between Tailwind utility classes and plain CSS in both directions. Paste classes to get CSS rules, with hover, focus, dark mode, reduced motion and responsive variants turned into pseudo-classes and media queries, and arbitrary values and properties supported. Or paste CSS to get Tailwind classes, using standard utilities wherever an exact match exists and valid arbitrary values otherwise. Anything outside the supported subset is listed rather than guessed.

Preset gallery
.element {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  border-radius: 0.75rem;
  background-color: #fff;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 600;
}

.element:hover {
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

@media (min-width: 768px) {
  .element {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

Accessibility checks

  • Pass Every class was converted.
  • Pass Values follow Tailwind v3 defaults. Tailwind v4 uses the same spacing and sizes but OKLCH palette colors, which is why palette names are not converted.

Export code

.element {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  border-radius: 0.75rem;
  background-color: #fff;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 600;
}

.element:hover {
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

@media (min-width: 768px) {
  .element {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
Favourites on this device (0)

No favourites yet.

Convert
Direction

How to use the converter

  1. Choose a direction: Tailwind → CSS or CSS → Tailwind.
  2. Paste your input: a class list, or one CSS rule’s declarations.
  3. For Tailwind → CSS, set the selector for the generated rules (for example .card).
  4. Read the result and the list of anything not converted.
  5. Copy or download the output.

What’s supported

  • Layout: display, position, inset, z-index, overflow and object-fit.
  • Flex and grid: direction, wrap, grow and shrink, basis, order, alignment, grid-cols-N and spans.
  • Spacing and sizing: padding, margin (including negative values), gap, width, height, min/max sizes and fractions.
  • Typography: sizes with line heights, weights, leading, tracking, alignment, transforms, decoration and truncate.
  • Borders and effects: widths, styles, radius, shadows and opacity.
  • Colors: black, white, transparent, current and arbitrary values, with opacity modifiers.
  • Arbitrary values and properties: w-[calc(100%-2rem)], [mask-type:luminance].

How it works

The converter parses your CSS into rules and declarations, then maps each declaration to the matching Tailwind utility, such as padding: 1rem to p-4. Values that don’t match the default scale become arbitrary values like p-[18px]. Hover, focus, dark-mode and media-query rules become variant prefixes such as hover: and md:. Palette color names aren’t guessed, because they differ between Tailwind versions, so colors are written as arbitrary values. Anything it can’t convert is listed rather than dropped silently.

Worked examples

Example 1: leaving Tailwind for one component

Load Card: the converter produces a base rule, a :hover rule for the larger shadow, and a (min-width: 768px) rule for the wider padding. Paste them into a regular stylesheet.

Example 2: adopting Tailwind gradually

Load Card CSS in CSS → Tailwind mode. Display, gaps, padding, radius and the shadow map to standard utilities, so you can replace a hand-written rule with classes.

Example 3: custom values

Load Custom CSS. Values without an exact utility, such as 3.25rem padding or backdrop-filter, become arbitrary values. Consider adding them to your theme if you use them often.

Common mistakes

  • Expecting exact palette colors. Convert palette names to arbitrary hex values first.
  • Copying classes with plugins. Plugin utilities (typography, forms) aren’t part of the core set.
  • Forgetting variant order. md:hover: and hover:md: both work here, but keep one convention in your code.

Why convert at all?

Common reasons include moving a component into a project without Tailwind, writing an email template where classes aren’t available, documenting what a utility actually does, or learning Tailwind by comparing classes with the CSS you already know. Whatever the reason, review the output once and keep it in version control so changes are easy to track.

Frequently asked questions

Which Tailwind version does it follow?

The spacing, sizing, typography, radius and shadow values follow Tailwind's v3 defaults, which v4 mostly keeps. Palette color names such as bg-blue-500 are deliberately not converted, because v3 uses hex values and v4 uses OKLCH. Use arbitrary colors such as bg-[#3b82f6], which convert exactly.

What happens to classes it doesn't support?

They are listed under "Not converted" in the result and the checks. The converter never invents a value, so the CSS you get is always accurate for what it does convert.

How are variants converted?

hover:, focus:, focus-visible:, active:, disabled: and similar become pseudo-classes on the selector. sm:, md:, lg:, xl: and 2xl: become min-width media queries (640, 768, 1024, 1280 and 1536px). dark: becomes a prefers-color-scheme media query.

Is the CSS to Tailwind output always valid?

Yes. Declarations that match a standard utility exactly use it (p-4, flex, rounded-lg); anything else becomes an arbitrary value or property such as [backdrop-filter:blur(8px)], which Tailwind accepts.

Can I convert Tailwind classes back to CSS?

Not with this tool, which converts CSS to classes. Your browser's developer tools show the generated CSS for any Tailwind class on the page.

Sources