Tailwind CSS to Vanilla CSS: How to Convert Utility Classes
Tailwind CSS has become one of the most popular CSS frameworks thanks to its utility-first approach. You write classes like flex items-center gap-4 p-6 directly in your HTML, and Tailwind generates the underlying CSS. But sometimes you need to convert those utility classes back into plain, vanilla CSS. Whether you are migrating a project, building email templates, learning CSS fundamentals, or debugging layout issues, understanding what each utility actually generates is an essential skill.
Why Convert Tailwind to Vanilla CSS?
There are several practical reasons why developers need to translate Tailwind classes into standard CSS:
- Understanding the output. Knowing what CSS Tailwind generates helps you debug layout issues faster and write better utility combinations.
- Migrating away from Tailwind. If your team decides to switch to plain CSS, CSS Modules, or a different framework, you need to extract the equivalent styles.
- Email templates. Most email clients do not support utility class frameworks. You need inline CSS or embedded stylesheets with standard properties.
- Learning CSS. If you learned Tailwind first, converting utilities to vanilla CSS is one of the best ways to deepen your understanding of CSS itself.
- Third-party integrations. Some CMS platforms, widget builders, or embedded contexts require vanilla CSS and do not support Tailwind processing.
How Tailwind Utilities Map to CSS
Each Tailwind utility class maps to one or more CSS property-value pairs. Here are the most common categories and their vanilla CSS equivalents.
Spacing
Tailwind uses a consistent spacing scale where each unit equals 0.25rem (4px at the default 16px root). The pattern is straightforward:
p-1 → padding: 0.25rem
p-2 → padding: 0.5rem
p-4 → padding: 1rem
p-6 → padding: 1.5rem
p-8 → padding: 2rem
px-4 → padding-left: 1rem; padding-right: 1rem
mt-6 → margin-top: 1.5rem
gap-4 → gap: 1rem
The formula is simple: multiply the number by 0.25 to get the rem value. So p-10 equals padding: 2.5rem, and m-16 equals margin: 4rem.
Typography
text-sm → font-size: 0.875rem; line-height: 1.25rem
text-lg → font-size: 1.125rem; line-height: 1.75rem
text-2xl → font-size: 1.5rem; line-height: 2rem
font-bold → font-weight: 700
font-medium → font-weight: 500
leading-relaxed → line-height: 1.625
tracking-tight → letter-spacing: -0.025em
text-center → text-align: center
Colors
Tailwind color utilities map to standard CSS color properties. The color value depends on your Tailwind configuration, but the default palette uses specific hex or oklch values:
text-white → color: #ffffff
bg-black → background-color: #000000
text-indigo-500 → color: #6366f1
bg-gray-900 → background-color: #111827
border-white/10 → border-color: rgb(255 255 255 / 0.1)
Flexbox and Grid
flex → display: flex
flex-col → flex-direction: column
items-center → align-items: center
justify-between → justify-content: space-between
flex-wrap → flex-wrap: wrap
flex-1 → flex: 1 1 0%
grid → display: grid
grid-cols-3 → grid-template-columns: repeat(3, minmax(0, 1fr))
Borders, Shadows and Rounded Corners
border → border-width: 1px
border-2 → border-width: 2px
rounded-lg → border-radius: 0.5rem
rounded-xl → border-radius: 0.75rem
rounded-full → border-radius: 9999px
shadow-md → box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)
shadow-lg → box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)
Responsive Breakpoints
Tailwind uses a mobile-first responsive system with prefix modifiers. Each prefix maps to a CSS media query with a min-width condition:
sm: → @media (min-width: 640px)
md: → @media (min-width: 768px)
lg: → @media (min-width: 1024px)
xl: → @media (min-width: 1280px)
2xl: → @media (min-width: 1536px)
For example, a class like md:grid-cols-2 generates the following CSS:
@media (min-width: 768px) {
.md\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
State Variants
Tailwind prefixes like hover:, focus:, and active: map directly to CSS pseudo-classes. The group-hover: variant uses a parent selector pattern:
hover:bg-indigo-600 → .element:hover { background-color: #4f46e5; }
focus:ring-2 → .element:focus { box-shadow: 0 0 0 2px ...; }
active:scale-95 → .element:active { transform: scale(0.95); }
group-hover:text-white → .group:hover .element { color: #fff; }
focus-visible:outline-2 → .element:focus-visible { outline-width: 2px; }
Common Conversion Examples
Here are full before-and-after examples showing Tailwind utility strings converted to equivalent vanilla CSS.
Centered Card
Tailwind:
Vanilla CSS:
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background-color: #030712;
Responsive Grid
Tailwind:
Vanilla CSS:
display: grid;
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 1.5rem;
padding: 2rem;
/* md breakpoint */
@media (min-width: 768px) {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* lg breakpoint */
@media (min-width: 1024px) {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
Button with Hover
Tailwind:
Vanilla CSS:
padding: 0.5rem 1rem;
background-color: #6366f1;
color: #ffffff;
border-radius: 0.5rem;
font-weight: 500;
transition-property: color, background-color, border-color;
transition-duration: 150ms;
.button:hover {
background-color: #4f46e5;
}
When to Stay with Tailwind
Converting to vanilla CSS is not always the right move. Tailwind offers significant productivity benefits, and there are cases where staying with it makes more sense:
- Rapid prototyping. Tailwind lets you build UIs faster by keeping styles in the markup. If speed is the priority, stick with utilities.
- Design system consistency. Tailwind enforces a constrained set of spacing, color and typography values. Converting to vanilla CSS can lead to inconsistencies if you are not disciplined about design tokens.
- Team familiarity. If your team is productive with Tailwind and you have no technical reason to migrate, switching adds overhead without clear benefit.
- Component frameworks. In React, Vue and Svelte projects, Tailwind pairs well with component-based architectures. The utility classes stay co-located with the component logic.
When to Convert to Vanilla CSS
- Email templates. Email clients strip out external stylesheets and do not process Tailwind. You need inline CSS or embedded style blocks.
- Third-party widgets. Embeddable components, browser extensions, and CMS snippets often cannot include a Tailwind build step.
- Performance-critical pages. For very small pages, shipping only the CSS you need as vanilla code can be lighter than including the Tailwind runtime.
- Learning purposes. Converting Tailwind to CSS is an excellent exercise for understanding how CSS layout, spacing and responsive design actually work under the hood.
Convert Tailwind to CSS instantly
Paste your Tailwind utility classes and get clean, readable vanilla CSS output. No build tools or configuration required.
Open Tailwind to CSS Converter