# Tailwind Class to CSS Converter

Parse Tailwind utility classes into equivalent plain CSS for non-Tailwind projects.

> Canonical page: https://elysiatools.com/en/tools/tailwind-class-to-css-converter

- **Category:** Development

- **Keywords:** tailwind, tailwind to css, css snippet, utility classes, tailwind playground, css converter, design tokens, flex, grid, hover variant

## Overview

See exactly what a Tailwind class produces — then copy the plain CSS into any project.

**Why this exists.** Tailwind is great, but sometimes you need the raw CSS: a non-Tailwind codebase, an email template, a design-token audit, or a one-off page. Instead of installing the Tailwind Playground or digging through source, paste the classes and get equivalent CSS instantly.

**What it covers.** The built-in rule engine handles the most-used utilities:
- **Layout**: flex, grid, gap, display, position, z-index, overflow
- **Spacing**: padding (p/px/py/pt/pr/pb/pl), margin (m/mx/my/...), space-x/space-y
- **Sizing**: width, height, max/min (w-4, h-screen, max-w-md...)
- **Colors**: background, text, border (bg-red-500, text-blue-200/75, border-gray-300)
- **Typography**: font-size, font-weight, line-height, text-align, letter-spacing
- **Borders**: border width, radius, style
- **Effects**: shadow, opacity, blur
- **Transforms & transitions**: scale, rotate, translate, duration, ease
- **Variants**: responsive (sm/md/lg/xl/2xl) and state (hover/focus/active)

**The opacity modifier.** Tailwind v3's `bg-blue-500/20` syntax (color + alpha) is expanded into `rgba()` so it works everywhere — no `color-mix()` needed.

**Scope selector.** Wrap the output under a custom selector (`.my-card { ... }`) or dump raw variables. Great for scoping a snippet to a component without a build step.

**Limitations.** This is a static rule table, not the full Tailwind JIT engine, so arbitrary values like `w-[327px]` and custom theme extensions are best-effort. For 100% fidelity use the official Tailwind compiler; this tool is for quick lookups and copy-paste.

## Inputs

- **Tailwind Classes** (textarea): p-4 flex gap-2 hover:bg-blue-500/20 md:p-6 rounded-lg shadow-md
- **Scope selector** (select)

## When to use

- When styling HTML email templates that require inline or traditional CSS instead of utility classes.
- When migrating components from a Tailwind project to a legacy codebase or a framework that does not use Tailwind CSS.
- When auditing design tokens or inspecting the exact CSS properties generated by specific Tailwind utility classes.

## How it works

- Paste your Tailwind utility classes into the input field.
- Select a scope selector, such as a custom class name or root variables, to wrap the generated CSS rules.
- The converter parses the classes, expands color opacity modifiers into rgba values, and groups responsive or state variants into media queries and pseudo-classes.
- Copy the generated CSS output directly into your stylesheet.

## Use cases

- Extracting CSS rules for a button component to use in a legacy WordPress theme.
- Converting Tailwind layout and spacing classes into inline-friendly CSS for HTML newsletters.
- Debugging Tailwind classes to see the exact CSS properties and values they apply.

## Frequently asked questions

### Does this tool support arbitrary values like w-\[327px\]?

It provides best-effort parsing for arbitrary values, but since it uses a static rule table rather than the full Tailwind JIT engine, some complex arbitrary values may not resolve.

### How does the tool handle color opacity modifiers like bg-blue-500/20?

It automatically expands the color and alpha modifier into a standard rgba() color value for maximum compatibility.

### Can I generate CSS for responsive variants like md: or lg:?

Yes, responsive variants are parsed and grouped inside standard CSS @media screen min-width queries.

### What does the scope selector option do?

It wraps the generated CSS rules inside a specific class selector or :root block to prevent styles from leaking into other elements.

### Does this converter require a build step or Node.js?

No, it runs entirely in the browser, instantly converting classes to CSS without any installation or configuration.

## Related tools

- [Markdown to PDF Converter - Markdown转PDF转换器](https://elysiatools.com/en/tools/markdown-to-pdf-converter): Convert Markdown files to PDF documents with proper formatting, syntax highlighting, and styling
- [Markdown to HTML Converter](https://elysiatools.com/en/tools/markdown-to-html): Convert Markdown text to HTML with customizable formatting options using Showdown
- [HTML to Markdown Converter](https://elysiatools.com/en/tools/html-to-markdown): Convert HTML content to Markdown format with customizable options using Turndown
- [Cron Expression Explainer](https://elysiatools.com/en/tools/cron-expression-explainer): Parse a 5-part / 6-part / Quartz cron expression into a plain-language schedule description, show the field-by-field breakdown, and list the next N execution times in any IANA timezone — with an AI-generated natural-language explanation in your language
- [Figma iOS Android pt dp sp Responsive Design Spec Card](https://elysiatools.com/en/tools/figma-ios-android-pt-dp-sp-responsive-design-spec-card): Convert a Figma px value into iOS pt, Android dp/sp, web rem/vw with a fluid clamp() snippet, a density-bucket render table and a touch-target accessibility audit, as a developer spec card.
- [Markdown Previewer](https://elysiatools.com/en/tools/markdown-preview): Convert Markdown to HTML with syntax highlighting and customizable themes
- [Data URI Generator](https://elysiatools.com/en/tools/data-uri-generator): Convert files into Data URIs (Base64 or percent-encoded) for inlining images, fonts, and assets directly into HTML, CSS, or Markdown
- [Indented List to ASCII Tree](https://elysiatools.com/en/tools/ascii-tree-from-indented-list): Convert a 2-space / 4-space / Tab indented hierarchical list (Markdown bullets, -, *, 1. prefixes optional) into a copyable ASCII directory tree. Two styles: Unicode box-drawing (├──└──│) for GitHub/Discord and classic ASCII (|--\--|) for plain text. Toggles for full guide lines, trailing spaces, and bracketed leaf nodes like docs/\[api.md\].

## Samples

- [Tailwind CSS Samples](https://elysiatools.com/en/samples/tailwind-css): Tailwind CSS examples - Utility-first CSS framework with responsive design, components, and custom configurations
- [Bulma CSS Framework Samples](https://elysiatools.com/en/samples/bulma): Bulma CSS framework examples including columns, components, form controls, layout system, and modern CSS-based design patterns
- [CSS Selector Samples](https://elysiatools.com/en/samples/css-selectors): Collection of CSS selector examples for extraction and analysis testing
- [CSS Viewer Samples](https://elysiatools.com/en/samples/css-viewer-samples): Sample CSS stylesheets (variables, flexbox/grid, animations) for the in-browser CSS Viewer