CSS to Tailwind Converter

CSS
/* A typical component: most of this maps cleanly.
   Hover any class to see what it became and why. */

.card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  font-size: 15px;
  color: #1f2937;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
}

.card:hover {
  background-color: #f9fafb;
}

/* Utilities live on one element, so the .card part cannot come along */
.card .title {
  font-weight: 600;
  text-transform: uppercase;
}

@media (min-width: 768px) {
  .card {
    padding: 24px 32px;
  }
}

Tailwind

worth checking4 CSS rules · Tailwind v4.3.3

Hover any class to see what it does and where it came from.

.card
flexitems-centergap-3rounded-lgborderborder-gray-200px-5py-3text-smtext-gray-800shadow-xs

1 class is worth checking

.card:hover
hover:bg-gray-50
.card .title
font-semibolduppercase

These classes go on .title. The rest of .card .title describes where that element sits, which utility classes cannot express — look at group-* or peer-* for that.

.card
md:px-8md:py-6
About this converter

Converting CSS to Tailwind

Paste a stylesheet on the left and the Tailwind classes appear on the right as you type. Click any rule to copy its classes. There is nothing to install and no account to make, and nothing you paste leaves your browser.

Each rule comes back as the classes that reproduce it. Shorthands are expanded before matching, so a four-value padding becomes the right combination of side classes rather than failing outright. Min-width media queries become breakpoint prefixes, and pseudo-classes become the matching variant.

The conversion table is generated from Tailwind v4.3.3 itself, at build time, rather than maintained by hand. That is the whole design: a hand-written mapping drifts the moment Tailwind ships a release, and a converter that answers with class names your Tailwind no longer has is worse than no converter. Nothing is uploaded — the conversion runs in your browser.

Off-scale values become arbitrary values in square brackets, and rules that utilities genuinely cannot express — a descendant selector, say — are flagged with the reason rather than quietly dropped.

Look up a single property

Every value and its class, for one property at a time:

All CSS properties

Common questions

Which Tailwind version does the converter target?
Whatever version is installed in this repository, currently v4.3.3. The conversion table is generated from the Tailwind release itself at build time rather than written by hand, so a class name only appears here if that release really produces it.
Do I need to sign up or install anything?
No. Paste CSS into the left pane and the classes appear on the right. There is no account, no upload, and no build step — the conversion runs in your browser, so the CSS never leaves your machine.
What happens to CSS that has no Tailwind equivalent?
It is flagged rather than dropped. Values that are off the scale become arbitrary values in square brackets, and anything a utility genuinely cannot express — a descendant selector, for example — is called out with an explanation instead of being silently discarded.
Does it handle media queries and pseudo-classes?
Yes. Min-width media queries become the matching breakpoint prefix such as md: or lg:, and pseudo-classes such as :hover and :focus become the corresponding variant prefix.
Are shorthand properties expanded?
Yes. Shorthands like padding, margin, border and flex are expanded into their long-hand declarations before matching, so a four-value padding becomes the right combination of side utilities rather than failing to match.
Why do some rules produce more classes than declarations?
Because several Tailwind utilities cover only part of a CSS property. A transform with three functions becomes three classes, and a filter behaves the same way, since Tailwind exposes each function separately so they can be composed.