Tailwind CSS to Vanilla CSS Converter

Convert Tailwind utility classes to plain CSS. Supports 200+ classes, responsive breakpoints, and state prefixes.

Input
Generated CSS
Paste Tailwind classes above to convert them to CSS.

How to Use the Tailwind to CSS Converter

  1. Choose a mode — "Classes → CSS" for a space-separated list of classes, "HTML → CSS" to extract classes from a full HTML snippet, or "Batch" for one class per line.
  2. Paste your Tailwind classes into the input area on the left.
  3. View the generated CSS on the right. The tool converts each class to its equivalent CSS property and value.
  4. Copy or download the output to use in your stylesheet.

Why Convert Tailwind to Vanilla CSS?

Tailwind CSS is an extremely popular utility-first framework that speeds up frontend development by providing pre-built CSS classes. However, there are many situations where you need to convert those utility classes to standard CSS: when migrating an older Tailwind project to a different stack, when delivering plain CSS to a client who doesn't use Tailwind, when using Tailwind in a rapid prototype that you later need to convert to a standalone component, or when you simply want to understand what CSS Tailwind is generating under the hood.

Supported Class Categories

  • Spacing — padding (p-, px-, py-, pt-, pr-, pb-, pl-) and margin (m-, mx-, my-, mt-, mr-, mb-, ml-) using Tailwind's default spacing scale
  • Display & Layout — block, inline, inline-block, flex, inline-flex, grid, inline-grid, hidden, container
  • Flexbox — flex-row, flex-col, flex-wrap, flex-nowrap, items-start/center/end/stretch, justify-start/center/end/between/around/evenly, flex-1, flex-auto, flex-none, grow, shrink, gap-*
  • Grid — grid-cols-1 through grid-cols-12, col-span-*, row-span-*, grid-rows-*, place-items-*, place-content-*
  • Typography — text-xs through text-9xl sizes, font-thin through font-black weights, text-left/center/right/justify, leading-*, tracking-*, font-sans/serif/mono, italic, not-italic, underline, line-through, no-underline, uppercase, lowercase, capitalize, normal-case
  • Colors — text-*, bg-*, border-* using all default Tailwind color palettes (slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose)
  • Sizing — w-* and h-* (0, px, full, screen, auto, 1/2, 1/3, 2/3, 1/4, 3/4, and numeric scale)
  • Borders — border, border-0, border-2/4/8, border-solid/dashed/dotted/double/none, rounded-*, border-opacity-*
  • Shadows — shadow-sm, shadow, shadow-md, shadow-lg, shadow-xl, shadow-2xl, shadow-inner, shadow-none
  • Transitions & Animations — transition, transition-all, transition-colors, duration-75/100/150/200/300/500/700/1000, ease-linear/in/out/in-out
  • Transforms — scale-*, rotate-*, translate-x-*, translate-y-*, skew-x-*, skew-y-*
  • Opacity — opacity-0 through opacity-100
  • Overflow — overflow-auto/hidden/visible/scroll, overflow-x-*, overflow-y-*
  • Position — static, fixed, absolute, relative, sticky, top-*, right-*, bottom-*, left-*, inset-*, z-*

Responsive and State Prefixes

This converter handles Tailwind's modifier syntax:

  • Responsive breakpoints — sm: (640px), md: (768px), lg: (1024px), xl: (1280px), 2xl: (1536px) — each maps to a CSS @media (min-width: ...) block
  • Hover state — hover: → :hover pseudo-class
  • Focus state — focus: → :focus pseudo-class
  • Active state — active: → :active pseudo-class
  • Disabled state — disabled: → :disabled pseudo-class
  • Dark mode — dark: → @media (prefers-color-scheme: dark) wrapper

Understanding Tailwind's Design Philosophy

Tailwind CSS was designed by Adam Wathan with a "utility-first" philosophy: instead of writing semantic class names like .card or .btn-primary, you compose designs directly in your HTML using small, single-purpose utility classes. This approach eliminates dead CSS, reduces naming decisions, and makes it easy to understand a component's design just by reading its HTML. The trade-off is verbose HTML — a component might have 15–20 classes. When you convert those classes to vanilla CSS, you often appreciate just how much work Tailwind was doing for you. Use this tool alongside our SVG to CSS tool to build fully standalone CSS stylesheets.

Tailwind v3 vs. Earlier Versions

This converter targets Tailwind CSS v3, which introduced Just-in-Time (JIT) compilation, arbitrary value support (e.g., w-[17px]), and a refreshed color palette. Key differences from Tailwind v2 include the removal of deprecated color names (warmGray, coolGray, etc., replaced by slate, zinc, neutral, stone), new color shades (50 and 950), and a unified typography plugin. If you are working with a Tailwind v2 project, the generated CSS from this tool will still be largely accurate for standard utility classes, but color names may differ.

Frequently Asked Questions

This tool supports 200+ of the most commonly used Tailwind CSS v3 utility classes including spacing, flexbox, grid, typography, colors, borders, shadows, and transitions. Highly custom or arbitrary value classes (e.g., p-[17px]) are noted but cannot be automatically converted without the full Tailwind configuration.
Responsive prefixes are converted to standard CSS @media queries. sm: maps to @media (min-width: 640px), md: to 768px, lg: to 1024px, xl: to 1280px, and 2xl: to 1536px. The utility inside the prefix is converted and wrapped in the appropriate media query block.
State prefixes like hover:, focus:, active:, and disabled: are converted to CSS pseudo-class selectors. For example, hover:bg-blue-500 becomes .element:hover { background-color: #3b82f6; }. The tool generates the correct CSS pseudo-class for each state prefix.
In HTML mode you can paste a complete HTML snippet. The tool scans all class attributes, extracts every Tailwind utility class found, and converts them all to CSS at once. This is useful when migrating an entire component from a Tailwind project to a plain CSS stylesheet.
The generated CSS is a good starting point and accurately represents what Tailwind generates for standard utility classes. However, Tailwind's actual output is produced by a PostCSS build pipeline that may handle specifics differently. Always review and test the generated CSS in your target environment.