Free Tailwind to CSS Converter Online - Expand Tailwind Classes to CSS
Convert Tailwind CSS utility classes back to regular CSS. Free online Tailwind to CSS converter. No signup required.
Output will appear here...Every Tailwind CSS class maps to one or more CSS properties under the hood, but discovering exactly which properties a class like flex or bg-sky-500 or md:hover:text-lg produces requires digging through source files or documentation. This converter resolves that gap instantly: paste any combination of Tailwind utility classes and receive the equivalent vanilla CSS output in one click. It handles responsive prefixes such as sm:, md:, and lg: by generating the correct @media queries, converts state modifiers like hover: and focus: into their matching pseudo-class selectors, and respects Tailwind v4 default theme values so the output matches what the browser would actually render. Whether you are debugging a layout, migrating a project away from Tailwind, building email templates that cannot use utility frameworks, or simply learning what each utility does under the surface, this tool gives you the answer without leaving the page.
Table of Contents
How to Convert Tailwind Classes to CSS
Paste your Tailwind classes
Open the Converter tab and type or paste the Tailwind utility classes you want to translate. You can enter a single class like p-4, a full class string like flex items-center justify-between px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700, or even multiple lines of classes separated by spaces or newlines. The input field accepts any format you would normally write inside an HTML class attribute.
Click Convert and review the output
Press the Convert button and the tool instantly generates the equivalent CSS. Each Tailwind class is expanded into its corresponding CSS property-value pair, grouped by selector. Responsive prefixes such as sm:, md:, lg:, xl:, and 2xl: are wrapped in the appropriate @media query blocks. State modifiers like hover:, focus:, active:, and disabled: become pseudo-class selectors. The output is formatted and ready to copy.
Copy the CSS into your project
Use the Copy button to grab the generated CSS and paste it into your stylesheet, CSS module, or CSS-in-JS file. You can also share the conversion with teammates using the Share button, which copies a link that recreates the exact same input and output on any browser. If you need to tweak the conversion later, save it to the Saved tab and reload it anytime.
Use the Reference tab for quick lookups
The Reference tab provides a categorized list of the most common Tailwind classes alongside their CSS equivalents. Instead of running a full conversion, you can browse categories like Layout, Spacing, Typography, Colors, and Borders to find the CSS property for any utility class at a glance. This is especially useful when you are learning Tailwind and want to build intuition for what each class does.
Explore examples in the Examples tab
The Examples tab ships pre-built component conversions that show realistic before-and-after results. You will find a navigation bar, a pricing card, a hero section, and a form layout, each displayed with the original Tailwind classes on one side and the generated CSS on the other. Click any example to load it into the converter, modify it, and copy the result.
When You Need to Convert Tailwind to Plain CSS
Building HTML email templates
Email clients such as Outlook, Gmail, and Yahoo strip class attributes and ignore external stylesheets. They only support inline CSS or style blocks with standard properties. Converting Tailwind utilities to vanilla CSS lets you keep writing Tailwind during development and then produce email-compatible output for production. This is one of the most common reasons developers reach for a Tailwind to CSS converter.
Migrating away from Tailwind
Projects that started with Tailwind sometimes need to move to vanilla CSS, whether because of team preference, bundle size concerns, or a technology stack change. Rather than rewriting every component from scratch, you can convert the existing Tailwind classes to standard CSS and refactor incrementally. The converter preserves all responsive behavior and state modifiers, so the migration can happen component by component without breaking the layout.
Working with CSS Modules or CSS-in-JS
Frameworks like CSS Modules, styled-components, Emotion, and JSS use standard CSS syntax. If you want to port a Tailwind-based design into one of these systems, you need the raw CSS properties. This converter gives you the exact property-value pairs that you can paste into a CSS Module file, a styled-component template literal, or an Emotion style object.
Debugging and understanding utility classes
When a Tailwind utility does not behave as expected, seeing the actual CSS it produces often reveals the issue faster than reading documentation. A class like inset-0 might be applying position: absolute along with top, right, bottom, and left properties simultaneously, which could conflict with other styles. The converter surfaces every property so you can inspect, override, or adjust it with full knowledge of what is being applied.
Embedding components in non-Tailwind environments
If you build a component with Tailwind but need to embed it inside a WordPress theme, a Shopify store, a legacy application, or a CMS that does not use Tailwind, you cannot rely on the utility classes being available. Converting the classes to standard CSS makes the component self-contained and portable across any platform that supports CSS.
Reducing Tailwind dependency for production
Some teams prefer to prototype with Tailwind for speed but ship production CSS that does not depend on the Tailwind runtime or build step. By converting the final utility classes to vanilla CSS, you eliminate the need for the Tailwind compiler in your production build pipeline, which can simplify deployment and reduce build times.
Tailwind Utility Classes vs Raw CSS: What Changes When You Convert
Class composition vs property expansion
A single Tailwind class like p-4 translates to one CSS declaration: padding: 1rem. But a class like inset-0 expands into five declarations: position: absolute; top: 0; right: 0; bottom: 0; left: 0. When you convert a string of ten Tailwind classes, the resulting CSS might contain thirty or more individual property declarations. This expansion is accurate but increases file size compared to the compact utility class notation.
Responsive design structure
Tailwind uses inline responsive prefixes (md:flex, lg:grid-cols-3) that keep the responsive behavior visible right in the HTML. After conversion, these become @media query blocks in CSS that are separated from the HTML. The behavior is identical, but the responsive logic is no longer visible at a glance in the markup. You need to cross-reference the stylesheet to see which breakpoints apply to which elements.
State and interaction styles
Tailwind modifiers like hover:bg-blue-700 and focus:ring-2 become CSS pseudo-class selectors such as .selector:hover and .selector:focus in the converted output. The conversion preserves the specificity and cascade order, but you now manage these states in a separate stylesheet rather than inline in the HTML. This can make interactive styles harder to discover during code review.
Theme values and custom configuration
Tailwind classes reference a theme configuration: text-blue-500 uses the blue-500 color token, p-4 uses the spacing scale. When converted to CSS, these tokens resolve to their literal values (color: #3b82f6; padding: 1rem;). You lose the connection to the theme layer. If your theme changes, you would need to reconvert the classes rather than updating a single configuration value.
Common Tailwind Classes and Their CSS Equivalents
Layout and Flexbox Conversions
| Tailwind Class | CSS Property | Value |
|---|---|---|
| flex | display | flex |
| grid | display | grid |
| hidden | display | none |
| block | display | block |
| inline-flex | display | inline-flex |
| items-center | align-items | center |
| justify-between | justify-content | space-between |
| flex-col | flex-direction | column |
| flex-wrap | flex-wrap | wrap |
| flex-1 | flex | 1 1 0% |
| gap-4 | gap | 1rem |
| grid-cols-3 | grid-template-columns | repeat(3, minmax(0, 1fr)) |
Spacing and Sizing Conversions
| Tailwind Class | CSS Property | Value |
|---|---|---|
| p-4 | padding | 1rem |
| px-6 | padding-left / padding-right | 1.5rem |
| py-2 | padding-top / padding-bottom | 0.5rem |
| m-4 | margin | 1rem |
| mx-auto | margin-left / margin-right | auto |
| mt-8 | margin-top | 2rem |
| w-full | width | 100% |
| h-screen | height | 100vh |
| max-w-6xl | max-width | 72rem |
| min-h-0 | min-height | 0 |
Typography and Color Conversions
| Tailwind Class | CSS Property | Value |
|---|---|---|
| text-lg | font-size / line-height | 1.125rem / 1.75rem |
| font-bold | font-weight | 700 |
| text-white | color | #ffffff |
| text-blue-500 | color | #3b82f6 |
| bg-gray-900 | background-color | #111827 |
| rounded-lg | border-radius | 0.5rem |
| border | border-width | 1px |
| shadow-md | box-shadow | 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) |
| opacity-75 | opacity | 0.75 |
Real Conversion Examples: Before and After
Navigation bar with responsive behavior
Input: flex items-center justify-between px-6 py-4 bg-white shadow-sm. Output: display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; background-color: #ffffff; box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05). When you add responsive prefixes like md:hidden, the converter wraps the hidden utility inside a @media (min-width: 768px) query, producing a selector that only applies at the medium breakpoint and above.
Call-to-action button with hover state
Input: px-8 py-3 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition-colors. Output: The base styles include padding, background-color, color, border-radius, and font-weight. The hover:bg-blue-700 class generates a separate .class:hover rule with background-color: #1d4ed8. The transition-colors utility adds transition-property: color, background-color, border-color, text-decoration-color, fill, stroke with a 150ms duration and cubic-bezier timing function.
Responsive grid layout
Input: grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6. Output: display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 1.5rem. The sm: prefix produces @media (min-width: 640px) { grid-template-columns: repeat(2, minmax(0, 1fr)); }. The lg: prefix produces @media (min-width: 1024px) { grid-template-columns: repeat(3, minmax(0, 1fr)); }. All three breakpoints are represented as separate media query blocks.
Card component with shadow and border
Input: bg-white rounded-xl p-6 shadow-md border border-gray-200. Output: background-color: #ffffff; border-radius: 0.75rem; padding: 1.5rem; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); border-width: 1px; border-color: #e5e7eb. This example shows how multiple border-related utilities (border and border-gray-200) combine into separate border-width and border-color declarations.
Common Conversion Issues and How to Fix Them
Missing Tailwind base styles in the output
Tailwind injects a base layer (Preflight) that normalizes browser defaults: it sets box-sizing: border-box on all elements, removes margins from headings and lists, and applies border-style: solid globally. The converter outputs only the CSS properties that correspond to the utility classes you provide. It does not include Preflight rules. If your converted component looks different from the Tailwind version, adding a CSS reset like normalize.css or including the key Preflight declarations manually will usually resolve the discrepancy.
Arbitrary value classes produce unexpected syntax
Tailwind allows arbitrary values with square bracket syntax, such as text-[13px] or bg-[#1da1f2]. These convert cleanly to font-size: 13px and background-color: #1da1f2 respectively. However, complex arbitrary values that include CSS variables or calc() expressions, such as w-[calc(100%-2rem)], need careful handling. The converter passes these through as-is, which is correct but means you must verify that the resulting CSS is valid in your target environment.
Group and peer modifiers require context
Tailwind's group-hover: and peer-focus: modifiers generate CSS that depends on a parent or sibling element having the group or peer class. The converter produces the correct descendant selector syntax (.group:hover .element), but if the group class is missing from the parent element in your HTML, the converted CSS will not match anything. Always ensure that the structural context (group and peer classes on container elements) is preserved when you use the converted CSS.
Theme customizations are not reflected
If your project uses a custom tailwind.config.js that extends or overrides the default theme (for example, changing the primary color palette or the spacing scale), the converter uses the default Tailwind theme values unless you configure it otherwise. This means text-primary might not resolve correctly if primary is a custom color token. For projects with heavy customization, verify that the converted values match your design system and adjust as needed.
Best Practices for Using Converted CSS in Production
Validate the output in a real browser
Always test converted CSS in the actual target environment before deploying. While the converter produces accurate property-value pairs, CSS specificity, cascade order, and inheritance can interact differently when the same styles move from Tailwind's utility-class approach to a traditional stylesheet. Pay special attention to components that use group-hover, peer, or nested responsive prefixes, as these create complex selector chains that may need manual adjustment.
Consolidate duplicate properties
When you convert multiple Tailwind class strings that share common utilities (such as several buttons all using the same padding and border-radius), the raw CSS output will contain duplicate declarations. Consolidate these into shared CSS classes to reduce file size and improve maintainability. This is one area where the converted output is more verbose than Tailwind's approach of reusing the same utility class across elements.
Preserve responsive breakpoints consistently
The converter generates @media queries based on Tailwind's default breakpoints (640px, 768px, 1024px, 1280px, 1536px). If your project uses custom breakpoints, update the media query values in the converted CSS to match. Inconsistent breakpoint values between components cause layout shifts at certain viewport widths that are difficult to diagnose without a systematic review.
Keep the original Tailwind classes as comments
During migration, consider adding the original Tailwind classes as CSS comments above each selector. This creates a clear audit trail that helps future developers understand where the styles came from and makes it easier to reconvert if the Tailwind source changes. For example, writing /* flex items-center px-4 py-2 bg-blue-500 */ above the converted selector preserves context without affecting rendering.
How the Converter Handles Responsive and State Modifiers
Responsive prefix conversion
Every responsive prefix maps to a specific @media min-width query. The sm: prefix becomes @media (min-width: 640px), md: becomes @media (min-width: 768px), lg: becomes @media (min-width: 1024px), xl: becomes @media (min-width: 1280px), and 2xl: becomes @media (min-width: 1536px). When you convert a class string like text-base md:text-lg lg:text-xl, the output contains three rules: the base font-size, one inside the md media query, and one inside the lg media query. The converter generates these as separate blocks to maintain the mobile-first cascade order that Tailwind relies on.
Pseudo-class modifier conversion
State modifiers produce CSS pseudo-class selectors. The hover: prefix generates a :hover selector, focus: generates :focus, active: generates :active, visited: generates :visited, disabled: generates :disabled, and focus-within: generates :focus-within. For a class like hover:bg-blue-700, the converter produces .class:hover { background-color: #1d4ed8; }. Multiple state modifiers on the same element create separate selector blocks, each with its own pseudo-class.
Stacked and combined modifiers
Tailwind allows stacking modifiers, such as md:hover:bg-blue-700, which applies the hover style only at the medium breakpoint and above. The converter produces a combined selector: @media (min-width: 768px) { .class:hover { background-color: #1d4ed8; } }. The media query wraps the pseudo-class selector, preserving both conditions. Dark mode modifiers (dark:) follow the same pattern, using a @media (prefers-color-scheme: dark) query if the media strategy is configured, or a .dark descendant selector if the class strategy is used.
Arbitrary and custom modifiers
Arbitrary variants like [&_nth-child(3)]:bg-red-500 generate CSS selectors that match the provided selector pattern. The converter passes these through with the appropriate nesting. Custom modifiers defined in your Tailwind configuration are not supported by default since the converter has no knowledge of your project-specific configuration, but you can manually adjust the generated selectors to match your custom modifier behavior.