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

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

Share

About this tool

What Is This Tailwind to CSS Converter?

This is a free, browser-based Tailwind CSS to CSS converter that expands Tailwind utility classes into their equivalent standard CSS declarations in real time. Paste any Tailwind class string — one class, a full className attribute, or an entire HTML or JSX snippet — and the right panel instantly shows the corresponding CSS output grouped into a clean .element { } rule block. It supports over 200 Tailwind utilities covering every display mode, position, overflow, all flexbox and grid properties, the complete spacing scale, all sizing utilities, the full typography system, colors, borders, effects, transitions, transforms, and interactivity. All processing runs entirely in your browser — no server, no sign-up, no data uploaded.

Understanding what Tailwind classes actually produce is one of the most valuable skills for debugging layout issues, learning the framework, and sharing code with developers or designers who are not familiar with Tailwind's utility naming conventions. This Tailwind to CSS tool bridges that gap instantly. Instead of hunting through the Tailwind documentation to find what p-6 or justify-between outputs, paste the class and see the exact CSS declaration — padding: 1.5rem and justify-content: space-between — in under a second.

Arbitrary value classes are a core feature of Tailwind v3 and v4. A class like w-[420px] expands to width: 420px, bg-[#3b82f6] expands to background-color: #3b82f6, and p-[1.5rem] expands to padding: 1.5rem. This converter handles the full arbitrary value syntax including underscore-to-space conversion inside brackets, so translate-x-[calc(50%_-_8px)] expands correctly to transform: translateX(calc(50% - 8px)). This is especially useful when debugging complex layout calculations that use arbitrary values.

Responsive variants and state variants are the two features that make Tailwind most powerful — and most opaque to new learners. A class like md:flex is just the word flex at a medium breakpoint — but knowing that md: maps to @media (min-width: 768px) and that flex maps to display: flex requires knowing both the breakpoint scale and the utility mapping. This converter handles both automatically: md:flex outputs @media (min-width: 768px) { .element { display: flex; } }, hover:bg-blue-500 outputs .element:hover { background-color: #3b82f6; }, and dark:text-white outputs @media (prefers-color-scheme: dark) { .element { color: #fff; } }. The full five-breakpoint responsive system (sm, md, lg, xl, 2xl), all pseudo-class variants (hover, focus, active, disabled, placeholder, first, last, odd, even, group-hover, peer-focus), and dark/print/motion media variants are all supported.

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
  • Clean CSS output — base classes in .element { }, variants in separate .element:hover { } and @media { } blocks, all properly indented
  • 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

How to Use

Paste Tailwind utility classes into the left panel. The simplest input is a space-separated class list like flex items-center justify-between p-4 bg-white rounded-lg shadow. You can also paste an HTML element with a class attribute — the tool strips the tag and attribute syntax automatically and processes just the class values. JSX className attributes like className="flex items-center gap-2 hover:bg-gray-100" are also parsed correctly — the tool strips the className= and quotes, extracts the class string, and converts it.

The right panel updates live and shows the converted CSS. Base classes appear in a single .element { } rule block with all declarations properly indented and terminated with semicolons. Responsive variant classes like md:flex or lg:grid-cols-3 appear in separate @media (min-width: ...) { .element { ... } } blocks below the base rule. State variant classes like hover:bg-blue-500 or focus:ring-2 appear in .element:hover { } and .element:focus { } selectors. Dark mode classes like dark:text-white appear in @media (prefers-color-scheme: dark) { .element { ... } } blocks.

Arbitrary value classes use Tailwind's square-bracket syntax — for example w-[420px], text-[#1f2937], mt-[calc(100vh-4rem)], or bg-[url('/hero.jpg')]. Paste any of these and the converter expands them to the exact CSS property and value. Underscores inside arbitrary values are converted to spaces: translate-x-[50%_-_8px] becomes transform: translateX(50% - 8px).

To convert from a full component file — for example a .tsx or .jsx file containing many className attributes — use the Upload button or drag the file onto the input panel. The tool reads the file and extracts all class values it finds in class="" and className="" attributes. The converted CSS output can then be Downloaded as a .css file for reference or for migration use. The History panel stores the last 15 conversion sessions — click any entry to restore that session's input and output instantly.

Common Use Cases

⇠
Understand Tailwind Classes
Expand any Tailwind class to its exact CSS equivalent to see precisely what it produces. Essential for learning Tailwind, explaining classes to teammates, and confirming that a class does what you expect it to do in a layout.
⚡
Debug Layout Issues
Paste a component's full className string and see all the CSS it produces in one place. Makes it easy to spot conflicting declarations, override order issues, and properties that are not behaving as expected without opening DevTools.
{}
Migrate Away from Tailwind
Convert Tailwind utility class strings to standard CSS when removing Tailwind from a project, migrating to CSS Modules, or exporting a component for use in a non-Tailwind codebase. The downloaded CSS file is immediately usable.
◑
Learn Responsive & State Variants
See exactly how sm:, md:, hover:, dark:, and other variant prefixes translate to @media rules and pseudo-class selectors. The converter makes Tailwind's variant system transparent and teaches you how responsive and interactive CSS works under the hood.
▦
Share CSS with Non-Tailwind Developers
Paste Tailwind class strings and get plain CSS to share with teammates, designers, or API consumers who are not familiar with Tailwind utility names. The CSS output is universally readable.
⊞
Design Handoff & Documentation
Convert component class strings to CSS for inclusion in design system documentation, Storybook stories, or handoff specs. Designers and product managers can review standard CSS properties more easily than Tailwind utility class names.

Frequently Asked Questions

The converter supports 200+ Tailwind utility classes including all display values (flex, grid, block, hidden, inline-flex), position (static, relative, absolute, fixed, sticky), overflow, all flexbox properties (flex-direction, justify-content, align-items, align-self, flex-wrap, gap, order, flex-grow, flex-shrink, flex-basis), all grid properties (grid-template-columns, grid-column, grid-row, col-span, row-span), the complete spacing scale (all margin and padding utilities), all sizing utilities (w-, h-, min-w, max-w, min-h, max-h, size-), the full typography system (text-, font-, leading-, tracking-, decoration-), all color utilities, border, border-radius, shadow, opacity, z-index, transitions, and transforms.

Arbitrary values use Tailwind's square-bracket syntax: w-[420px] means width: 420px, bg-[#3b82f6] means background-color: #3b82f6, and p-[1.5rem] means padding: 1.5rem. Underscores inside brackets are converted to spaces, so translate-x-[calc(50%_-_8px)] expands to transform: translateX(calc(50% - 8px)). This converter handles all standard arbitrary value patterns including calc() expressions, custom hex colors, CSS variables (var(--token)), and URL values for background images.

Responsive variants are converted to @media (min-width: ...) rules using Tailwind's default breakpoint values: 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:, first:, last:, odd:, even:, placeholder:, checked:, required:) are converted to the appropriate CSS pseudo-class selectors. Dark mode (dark:) is converted to @media (prefers-color-scheme: dark). Print (print:) is converted to @media print. Motion-safe and motion-reduce variants are converted to their @media (prefers-reduced-motion: ...) equivalents. Group-hover and peer-focus variants are shown with appropriate selector notation.

Yes. The converter detects and strips class="..." and className="..." attributes from pasted HTML or JSX. It also strips angle-bracket tags, so you can paste a full component snippet — <button className="flex items-center gap-2 hover:bg-gray-100 px-4 py-2 rounded"> — and it extracts and converts all the classes automatically. This makes it easy to convert the full class string from any element without manually selecting just the class values.

Every conversion is automatically saved to the history panel with a timestamp and a preview of the first few classes. Up to 15 history entries are saved per session. Click any entry to instantly restore that session's input and output — useful when you want to compare two conversions or return to a class string you were analyzing earlier. History is stored in browser memory for the current session only.

No. All conversion runs entirely in your browser using JavaScript. Your Tailwind class strings and any file contents you upload are never sent to any server, never stored, and never logged. This makes the tool 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. The 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 Tailwind classes produce identical CSS output across both versions.