Tailwind → CSS
Expand utility classes to CSS
Selectors
Tailwind Classes10 lines
CSS Output28 properties
/* <div class="flex flex-col items-center p-6 rounded-2xl bg-white shadow-md"> */
.div {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.5rem;
  border-radius: 1rem;
  background-color: #ffffff;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

/* <img class="size-48 rounded-lg shadow-xl"> */
.img {
  width: 12rem;
  height: 12rem;
  border-radius: 0.5rem;
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

/* <div class="mt-4 text-center"> */
.div-2 {
  margin-top: 1rem;
  text-align: center;
}

/* <h2 class="text-lg font-semibold text-gray-900"> */
.h2 {
  font-size: 1.125rem;
  font-weight: 600;
  color: #111827;
}

/* <p class="text-sm text-gray-500 mt-1"> */
.p {
  font-size: 0.875rem;
  color: #6b7280;
  margin-top: 0.25rem;
}

/* <button class="mt-4 px-6 py-2 rounded-full bg-blue-600 text-white text-sm font-medium hover:bg-blue-700 transition"> */
.button {
  margin-top: 1rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  border-radius: 9999px;
  background-color: #2563eb;
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 500;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.button:hover {
  background-color: #1d4ed8;
}
28 properties generated6 elements detected

Related Tools

See all ->
CSS → TailwindConvert CSS to utilitiesTailwind FormatterSort & group classesCSS AutoprefixerVendor prefixes + BrowserslistFlexbox BuilderVisual layout editorCSS Minifier / BeautifierMinify & format CSSCSS Grid BuilderVisual grid layout editorHTML → JSX ConverterConvert HTML to ReactREM ↔ PX ConverterBase font size calculator

Tailwind to CSS Converter — Expand Utility Classes to Plain CSS Online

Updated May 14, 2026
Share & Support

What's included

Features

Converts 200+ Tailwind utility classes to standard CSS declarations with accurate values
Arbitrary value support — w-[420px], bg-[#3b82f6], p-[1.5rem], gap-[18px], translate-x-[calc(...)] all handled
Responsive breakpoints — sm: md: lg: xl: 2xl: converted to correct @media (min-width: ...) rule blocks
State variants — hover: , focus:, active:, disabled:, dark:, placeholder:, group-hover:, peer-focus: and more converted to proper CSS selectors and media rules
HTML and JSX snippet input — paste a full component with class="..." or className="..." and the tool extracts and converts all classes automatically; use our HTML Formatter to clean up the markup first
Clean CSS output — base classes in .element { }, variants in separate .element:hover { } and @media { } blocks, all properly indented; minify the result with our CSS Minifier & Beautifier
Conversion history — last 15 conversions auto-saved with one-click restore
Syntax highlighting for Tailwind input and CSS output panels
File upload and drag & drop for .txt, .html, .jsx, .tsx files
Download output as a .css file
100% client-side — no data uploaded, no sign-up required; reverse with our CSS to Tailwind converter

About this tool

See What Tailwind Classes Actually Do — Expand Any Class to Plain CSS Instantly

You're debugging a layout and items-center isn't centering what you expect — but you're not sure if it's the wrong class or a parent container issue. You want to share a Tailwind className string with a teammate who doesn't know Tailwind. Or you're removing Tailwind from a project and need the equivalent CSS for each component's class list. Paste the class string here and see the exact CSS it produces in one click.

This converter expands Tailwind utility classes to their exact CSS declarations in real time. Each class first hits a static lookup table for fixed-value utilities like flex or items-center, then falls through to a set of pattern matchers keyed on prefix — p-, m-, w-, bg-, rounded-, and so on — each of which resolves its token against the matching Tailwind scale (spacing, the full color palette, font sizes, border radii, opacity, z-index) before emitting a CSS declaration. Classes that match nothing are collected separately and appear as a commented-out /* not converted */ line rather than silently vanishing, so you always know what wasn't handled.

Variant handling is where this goes beyond a simple lookup: the parser walks each class character by character, splitting on : while tracking bracket depth so that arbitrary variants like [&:hover]:bg-red-500 aren't broken apart at the colon inside the brackets. Each variant resolves to either a media query (breakpoints sm through 2xl, plus dark:, print:, and motion-safe:/motion-reduce:) or a pseudo-selector (hover:, focus:, nth-child patterns like odd:/even:, and pseudo-elements like before:/placeholder:). Classes are then grouped by their combined media+pseudo key so that, for example, every declaration produced by md:hover:bg-blue-500 and md:hover:text-white lands in the same nested @media (min-width: 768px) { .element:hover { ... } } block instead of two separate ones.

Arbitrary value classes are handled throughout: w-[420px] expands to width: 420px, and underscore-encoded spaces resolve correctly so translate-x-[calc(50%_-_8px)] becomes transform: translateX(calc(50% - 8px)). Paste a bare class list, a full HTML element with class="...", or JSX with className="..." — the tool auto-detects markup, extracts one selector per tag (.div, .button-2 for a second button, etc.), and converts each independently. Output can be viewed as plain CSS, SCSS with nested variant blocks, or a camelCased JS style object, all client-side with nothing sent to a server.

Step by step

How to Use

  1. 1
    Paste Tailwind classes into the left panelPaste a space-separated class list like flex items-center justify-between p-4 bg-white rounded-lg shadow, or an HTML element with a class="..." attribute, or a JSX element with className="...". The tool strips markup and attribute syntax automatically and processes only the class values. Multiple elements can be pasted at once.
  2. 2
    Review the live CSS outputThe right panel updates instantly. Base classes appear in a single .element { } block. Responsive variant classes like md:flex or lg:grid-cols-3 appear in separate @media (min-width: ...) blocks below. State variants like hover:bg-blue-500 appear in .element:hover { } selectors. Dark mode classes like dark:text-white appear in @media (prefers-color-scheme: dark) blocks.
  3. 3
    Handle arbitrary value classesArbitrary value classes like w-[420px], text-[#1f2937], mt-[calc(100vh-4rem)] expand to their exact CSS property and value. Underscores inside arbitrary values convert to spaces: translate-x-[50%_-_8px] becomes transform: translateX(50% - 8px). All standard arbitrary value patterns including calc(), CSS custom properties, and URL values are supported.
  4. 4
    Switch between CSS, SCSS, and JS Object outputUse the tabs in the header to switch output format. CSS gives a clean rule block. SCSS gives nested output with pseudo-class and media variants nested inside the selector. JS Object gives a JavaScript styles object with camelCased property names — useful for React inline styles or styled-components. Selector labels auto-generate from the HTML tag (.div, .button, etc.) and can be clicked to rename.
  5. 5
    Upload a file for bulk conversionClick Upload or drag and drop a .html, .jsx, .tsx, or .txt file onto the input panel. The tool reads the file, extracts all class="" and className="" attribute values it finds, and converts them. Each element gets its own CSS block with an annotated comment. You can rename the auto-generated selectors using the selector strip that appears below the toolbar.
  6. 6
    Copy or download the CSS outputClick Copy CSS, Copy SCSS, or Copy JS (depending on the active tab) to copy to clipboard. Click Download to save the output as a .css, .scss, or .js file. The History panel stores the last 15 conversion sessions automatically — click any entry to restore that input and output instantly.

Real-world uses

Common Use Cases

⇠
Debug a layout — see all the CSS a component is producing at once
Paste a component's full className string and see every CSS declaration it generates. Makes it easy to spot conflicting values, unexpected overrides, and properties that aren't doing what you thought without digging through DevTools. Sort the class string first with our Tailwind Formatter to organize it by category.
⚡
Understand what a Tailwind class actually does before using it
Not sure whether you need items-center or content-center? Paste both and compare the CSS output. Faster than reading docs and confirms the exact property and value, not just the description.
{}
Remove Tailwind from a project and get standard CSS for each component
Paste each component's className string and download the CSS output. The resulting standard CSS declarations are immediately usable in a CSS Modules or plain stylesheet setup — no manual lookup needed. Build flexbox or grid layouts from scratch with our Flexbox Builder after migrating.
◑
Learn how md:, hover:, and dark: variants translate to real CSS
Paste md:flex, hover:bg-blue-500, or dark:text-white to see the exact @media rule or pseudo-class selector each generates. Makes Tailwind's variant system concrete instead of abstract.
▦
Share CSS with a designer or teammate who doesn't know Tailwind
Paste the className string and copy the plain CSS output to share in a Figma comment, a PR description, or a design handoff doc. The CSS is universally readable — no Tailwind knowledge required.
⊞
Generate CSS for design system documentation or Storybook stories
Convert component class strings to CSS for design system docs or Storybook. Designers and product managers can review actual CSS property values more easily than Tailwind utility names. Preview how the component looks at different breakpoints with our Responsive Preview Tool.

Got questions?

Frequently Asked Questions

Paste the Tailwind class name into the input panel — for example flex, p-6, or text-gray-700 — and the CSS it produces appears instantly on the right: display: flex, padding: 1.5rem, or color: #374151. You can paste a single class, a full space-separated class list, or an entire HTML/JSX snippet with a class or className attribute. The converter strips the markup and converts just the class values.

Paste the arbitrary value class directly and the converter expands it to the corresponding CSS property and value. w-[420px] becomes width: 420px, bg-[#3b82f6] becomes background-color: #3b82f6, and p-[1.5rem] becomes padding: 1.5rem. Underscores inside brackets are converted to spaces, so translate-x-[calc(50%_-_8px)] expands correctly to transform: translateX(calc(50% - 8px)). All standard arbitrary value patterns including calc() expressions, CSS variables, and URL values are supported.

Responsive variants are converted to @media (min-width: ...) rules using Tailwind's default breakpoints: sm at 640px, md at 768px, lg at 1024px, xl at 1280px, and 2xl at 1536px. For example, md:flex becomes @media (min-width: 768px) { .element { display: flex; } } and lg:grid-cols-3 becomes @media (min-width: 1024px) { .element { grid-template-columns: repeat(3, minmax(0, 1fr)); } }. All five standard Tailwind breakpoints are supported.

Pseudo-class variants (hover:, focus:, active:, disabled:, placeholder:, checked:) are converted to the appropriate CSS pseudo-class selectors — for example hover:bg-blue-500 becomes .element:hover { background-color: #3b82f6; }. Dark mode (dark:) is converted to @media (prefers-color-scheme: dark). Print (print:) becomes @media print. Motion-safe and motion-reduce variants are converted to @media (prefers-reduced-motion: ...) equivalents.

Yes. The converter detects and strips class="..." and className="..." attributes from pasted HTML or JSX automatically. Paste a full element like <button className="flex items-center gap-2 hover:bg-gray-100 px-4 py-2 rounded"> and it extracts and converts all the class values. You can also upload a .jsx, .tsx, or .html file — the tool reads all class and className attributes it finds and converts them.

The history panel stores up to 15 recent conversions automatically with a timestamp and a preview of the first few classes. Click any history entry to restore that input and output instantly — useful for comparing two class lists or returning to a string you were analyzing earlier.

No. All conversion runs entirely in your browser using JavaScript. Your class strings and any file contents you upload are never sent to any server, never stored, and never logged. Safe to use with proprietary component code, internal design systems, and client project code.

The converter uses Tailwind's stable class naming conventions which are compatible with both v3 and v4. Utility class names for spacing, typography, flexbox, grid, colors, and effects are the same in both versions. Some v4-specific changes to custom property naming and certain new utilities may not be reflected, but the vast majority of classes produce identical output across both versions.