How do I convert CSS to Tailwind classes?

Try the free converter first

Paste any CSS rule into the CSS to Tailwind converter. It runs in your browser and maps values to Tailwind's default scale where they fit. It is the quickest way to convert a rule you copied from DevTools or an old stylesheet.

How values map to the scale

Tailwind v4 spacing is based on 0.25rem steps, so with a 16px root, p-4 is 16px and p-6 is 24px. Colors, radii and font sizes have named steps too.

• padding: 16px 24px becomes px-6 py-4.
• gap: 0.5rem becomes gap-2.
• border-radius: 0.75rem becomes rounded-xl.
• font-size: 0.875rem; line-height: 1.25rem becomes text-sm.
• font-weight: 600 becomes font-semibold.
• display: flex; align-items: center; justify-content: space-between becomes flex items-center justify-between.

.button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 8px;
  background: #4f46e5;
  color: #fff;
  font-weight: 600;
}
.button:hover { background: #6366f1; }

<!-- Tailwind -->
<a class="inline-flex items-center gap-2 rounded-lg bg-indigo-600 px-4 py-2.5 font-semibold text-white hover:bg-indigo-500">

Tailwind v4 defines its palette in oklch, so a hex color from an old site rarely matches a palette step exactly. Matching it to the nearest step keeps your design consistent. If the exact brand color matters, use an arbitrary value or a theme variable instead. See hex to Tailwind color.

When arbitrary values are the right call

Arbitrary values like w-[372px] or bg-[#0b1020] are fine for one-off values. If the same value shows up in many places, add it to your theme so it becomes a real class:

@import "tailwindcss";

@theme {
  --color-brand: #0b1020;
  --radius-card: 14px;
}

<!-- now available as -->
<div class="rounded-card bg-brand">

For CSS variables you want to keep, Tailwind v4 has a short form: bg-(--brand) reads var(--brand). More in are arbitrary values bad practice.

States, breakpoints and the leftovers

• :hover, :focus and :disabled rules become hover:, focus: and disabled: prefixes.
• @media (min-width: 768px) becomes md:. Max-width queries become max-md: and similar.
• Complex selectors (.list > li + li) have no single-class equivalent. Use variants like [&>li+li]:mt-2 sparingly, or move the class onto the child.
• Keyframe animations stay in CSS. Define them in your stylesheet and reference them with animate-[name_1s_ease-in-out] or a theme variable.

Convert whole elements with PickCode

1. Pick the element on the live page. Press Alt Shift C and hover it. The hover card already shows its Tailwind classes.
2. Click to copy as Tailwind. Colors, spacing, radius and type are matched to the default Tailwind scale. Values that do not fit become exact arbitrary values.
3. Keep states and breakpoints. The page's own :hover and :focus rules and min-width breakpoints it can read come out as hover:, focus:, sm:, md: and lg: classes.
4. Keep variables. Colors that use CSS variables keep them, so you can map them to your own theme.

Questions

Sources

1. Reddit r/tailwindcss: is there a library that converts CSS to Tailwind classes?
2. Reddit r/javascript: css-to-tailwind converter
3. Tailwind CSS: using arbitrary values
4. Tailwind CSS: theme variables
5. Tailwind CSS: hover, focus and other states