CSS to Tailwind

Overview

The CSS to Tailwind converter maps traditional CSS properties to Tailwind CSS utility classes in real time. Paste CSS on the left, see the converted class string on the right. It supports nested syntax, media queries, pseudo-classes, pseudo-elements, and @supports queries — useful for project migrations, learning the Tailwind class name system, or converting design exports quickly.

What a Conversion Looks Like

Input with a hover state and a responsive breakpoint:

.button {
  padding: 0.875rem 1rem;
  margin-left: 16px;
  font-size: 12px;
  color: #3b82f6;

  &:hover {
    color: #1d4ed8;
    text-decoration: underline;
  }

  @media (min-width: 768px) {
    width: 750px;
  }
}

Output:

<div class="py-3.5 px-4 ml-4 text-xs text-blue-500 hover:text-blue-700 hover:underline md:w-[750px]">

padding: 0.875rem maps to py-3.5, font-size: 12px maps to text-xs, nested &:hover becomes hover: variants, and min-width: 768px becomes the md: prefix.

Using a Custom Tailwind Config

The config panel in the bottom-right accepts standard Tailwind JSON. Without it, the tool uses the default Tailwind theme and falls back to arbitrary value syntax (w-[750px]) for values with no built-in class. Adding your project config affects three things:

  • Custom colors: colors["brand-blue"]["600"]: "#1e40af" makes that hex convert to text-brand-blue-600 instead of text-[#1e40af]
  • Custom breakpoints: screens["tablet"]: { min: "640px", max: "1023px" } makes the corresponding media query convert to tablet: prefix
  • @supports: supports["grid"]: "display: grid" makes @supports (display: grid) convert to supports-grid:

What Will Not Convert Cleanly

Generates arbitrary value syntax

  • calc() expressions like width: calc(100% - 2rem)
  • var() CSS variable references
  • Non-standard values like padding: 7px (no matching Tailwind step)
  • Complex filter function chains

Needs manual handling

  • @keyframes animation definitions
  • Browser prefixes (-webkit-, -moz-)
  • CSS Grid named areas (grid-template-areas)
  • Custom property declarations (:root { --var: value })

The rem Baseline Matters

The tool converts rem values using 1rem = 16px as the fixed baseline. If your project sets a different root font size — for example html { font-size: 62.5% } making 1rem = 10px — the converted class names will be off. Adjust the remInPx field in the config panel to match your project's actual root font size.