Does it support every Tailwind class?

It covers the most commonly used spacing, layout, color, and typography utilities via a built-in map, not the full Tailwind class set.

Are unrecognized classes reported?

Yes, classes that aren't recognized are listed separately so you know what's missing.

Does it need Tailwind installed?

No, the mapping is built in and runs entirely in your browser.

Tailwind Class to CSS

Translate common Tailwind utility classes into plain CSS.

Works Offline

Privacy First

No Login

No API

Tailwind classes

Plain CSS

.element {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem;
  background-color: #3b82f6;
  border-radius: 0.5rem;
  color: #ffffff;
  font-weight: 700;
}

About the Tailwind Class to CSS

Paste a string of Tailwind utility classes and see the equivalent plain CSS declarations, covering spacing, sizing, flexbox, colors, typography, borders, and more using a built-in mapping table.

Examples

Flex container

flex items-center justify-between p-6

Output

display: flex; align-items: center; justify-content: space-between; padding: 1.5rem;

Related tools

Border Radius Generator

HTML & CSS

Fine-tune per-corner border radii visually.

Box Shadow Generator

HTML & CSS

Layer multiple box-shadows with a live preview.

Clip Path Generator

HTML & CSS

Design polygon clip-path shapes with a live preview.

CSS Animation Generator

HTML & CSS

Build keyframe animations visually with a live preview.

CSS Aspect Ratio Calculator

HTML & CSS

Simplify ratios and compute matching dimensions.

CSS Filter Playground

HTML & CSS

Tune blur, brightness, contrast, and more with a live preview.

Frequently asked questions

Version 1.0.0 · Updated 2026-08-06 · Runs entirely in your browser