Tailwind to CSS: Convert Utility Classes to Plain CSS Properties

Tailwind CSS utility classes are concise, but not everyone on your team reads them fluently. Converting Tailwind classes to their equivalent CSS properties helps you understand what each utility does, debug layout issues faster, and migrate components when you need to move away from Tailwind.

Why Convert Tailwind to CSS?

Tailwind’s utility-first approach packs a lot of information into class strings like flex items-center justify-between p-4 bg-white rounded-lg shadow-md. For developers comfortable with Tailwind, that reads instantly. For everyone else — including designers reviewing code, junior developers learning CSS, or teams using a different framework — a plain CSS translation is far more useful.

Common Reasons for Conversion

Learning CSS fundamentals: Understanding what tracking-tight or leading-relaxed actually means in CSS terms
Debugging layout issues: Seeing the actual display, align-items, and justify-content values when something is misaligned
Framework migration: Moving from Tailwind to styled-components, CSS Modules, or plain CSS
Code review: Making class strings readable for team members unfamiliar with Tailwind
Documentation: Writing CSS-based specs for design systems that should remain framework-agnostic
Email templates: Converting Tailwind prototypes to inline CSS for email clients that do not support utility classes

Tailwind Class Categories

Understanding how Tailwind organizes its utilities helps you convert them more effectively.

Layout & Spacing

These utilities control the box model and spacing:

Tailwind                    CSS
──────────────────────────  ──────────────────────────
p-4                         padding: 1rem;
px-6                        padding-left: 1.5rem;
                            padding-right: 1.5rem;
mt-8                        margin-top: 2rem;
mx-auto                     margin-left: auto;
                            margin-right: auto;
w-full                      width: 100%;
max-w-lg                    max-width: 32rem;
h-screen                    height: 100vh;

Flexbox & Grid

Tailwind                    CSS
──────────────────────────  ──────────────────────────
flex                        display: flex;
flex-col                    flex-direction: column;
items-center                align-items: center;
justify-between             justify-content: space-between;
gap-4                       gap: 1rem;
grid grid-cols-3            display: grid;
                            grid-template-columns:
                              repeat(3, minmax(0, 1fr));

Typography

Tailwind                    CSS
──────────────────────────  ──────────────────────────
text-lg                     font-size: 1.125rem;
                            line-height: 1.75rem;
font-bold                   font-weight: 700;
font-medium                 font-weight: 500;
tracking-tight              letter-spacing: -0.025em;
leading-relaxed             line-height: 1.625;
text-center                 text-align: center;
text-gray-600               color: rgb(75 85 99);

Visual Styling

Tailwind                    CSS
──────────────────────────  ──────────────────────────
bg-white                    background-color: #fff;
rounded-lg                  border-radius: 0.5rem;
rounded-full                border-radius: 9999px;
shadow-md                   box-shadow: 0 4px 6px -1px
                              rgb(0 0 0 / 0.1), ...;
border border-gray-200      border: 1px solid
                              rgb(229 231 235);
opacity-50                  opacity: 0.5;

Responsive & State Modifiers

Tailwind modifiers like md:, hover:, and focus: map to CSS media queries and pseudo-classes:

Tailwind                    CSS
──────────────────────────  ──────────────────────────
md:flex-row                 @media (min-width: 768px) {
                              flex-direction: row;
                            }
hover:bg-blue-600           :hover {
                              background-color:
                                rgb(37 99 235);
                            }
focus:ring-2                :focus {
                              box-shadow: ...;
                            }

How to Use Our Tailwind to CSS Tool

Paste your Tailwind classes into the input — either a single class or a full class string from an element
View the CSS output — each utility class is converted to its corresponding CSS property and value
Copy the plain CSS for use in your stylesheet, documentation, or debugging workflow

Tips for Best Results

Paste classes exactly as they appear in your HTML, including responsive prefixes like md: and lg:
State variants such as hover:, focus:, and active: are converted to their respective pseudo-class selectors
Custom values using bracket notation like w-[300px] or bg-[#6750A4] are supported
Negative values like -mt-4 convert to margin-top: -1rem

Practical Use Cases

Migrating a Component

If you are moving a Tailwind component to a CSS Modules project, convert the class string first, then organize the output into a proper CSS class:

Tailwind HTML:

<div class="flex items-center gap-4 p-6 bg-white rounded-2xl shadow-sm">

Converted CSS:

.card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem;
  background-color: #fff;
  border-radius: 1rem;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

Understanding Tailwind’s Spacing Scale

Tailwind uses a spacing scale where each unit equals 0.25rem (4px). The converter makes this explicit:

Tailwind	CSS Value	Pixels (at 16px base)
`p-1`	`padding: 0.25rem`	4px
`p-2`	`padding: 0.5rem`	8px
`p-4`	`padding: 1rem`	16px
`p-6`	`padding: 1.5rem`	24px
`p-8`	`padding: 2rem`	32px
`p-12`	`padding: 3rem`	48px

Debugging Layout Issues

When a flex layout is not behaving as expected, converting the classes to CSS often reveals the problem. Seeing justify-content: space-between spelled out can be clearer than scanning past justify-between in a long class string, especially when multiple layout utilities interact.

Frequently Asked Questions

Does the tool handle Tailwind v3 and v4 classes? The tool covers the standard Tailwind CSS utility classes that are consistent across versions, including the core spacing, typography, layout, and color utilities.

What about custom Tailwind configuration? The converter handles default Tailwind values. If your project uses a custom tailwind.config.js with extended spacing, colors, or breakpoints, the output will reflect Tailwind’s defaults rather than your custom values.

Can I convert an entire Tailwind component at once? Yes. Paste the full class string from any HTML element, and the tool will convert every utility class to its CSS equivalent in one step.

Does this work with arbitrary values like w-[calc(100%-2rem)]? Bracket notation is supported. The tool extracts the value inside the brackets and maps it to the correct CSS property, producing output like width: calc(100% - 2rem).

Is there any CSS that Tailwind cannot express? Tailwind covers the vast majority of CSS properties through utilities and arbitrary values. However, complex selectors (like nth-child combinations), multi-step animations defined with @keyframes, and some newer CSS features may require writing CSS directly.

Try our free Tailwind to CSS converter to translate utility classes to plain CSS properties instantly.