CSS to Tailwind: How to Convert Any CSS to Utility Classes

Migrating from custom CSS to Tailwind CSS is one of the most common refactoring tasks in modern frontend development. Whether you’re converting a legacy stylesheet, translating a design from Figma, or bringing in a third-party component, knowing how CSS properties map to Tailwind utility classes saves significant time.

Convert CSS to Tailwind instantly →

How Tailwind CSS Works

Tailwind is a utility-first CSS framework. Instead of writing semantic class names like .card or .hero-section, you compose styles from single-purpose utility classes directly in HTML:

<!-- Traditional CSS approach -->
<div class="card">...</div>

<!-- Tailwind approach -->
<div class="rounded-lg shadow-md p-6 bg-white border border-gray-200">...</div>

Each utility class maps to one (or a small group of) CSS declarations. The Tailwind build process scans your code and generates only the CSS you actually use.

Core CSS-to-Tailwind Mappings

Spacing (margin, padding)

Tailwind uses a numeric scale where 1 = 4px (0.25rem) by default:

CSS	Tailwind
`margin: 0`	`m-0`
`margin: 1rem`	`m-4`
`margin: 2rem`	`m-8`
`margin-top: 1.5rem`	`mt-6`
`margin-left: auto`	`ml-auto`
`padding: 0.5rem`	`p-2`
`padding: 1.25rem`	`p-5`
`padding-left: 2rem`	`pl-8`
`padding-top: 0; padding-bottom: 0`	`py-0`
`padding-left: 1rem; padding-right: 1rem`	`px-4`

The shorthand pattern: m = margin, p = padding, t/r/b/l = top/right/bottom/left, x = horizontal, y = vertical.

Sizing (width, height)

CSS	Tailwind
`width: 100%`	`w-full`
`width: 50%`	`w-1/2`
`width: 100vw`	`w-screen`
`width: auto`	`w-auto`
`width: 2rem`	`w-8`
`max-width: 64rem`	`max-w-4xl`
`height: 100%`	`h-full`
`height: 100vh`	`h-screen`
`min-height: 100vh`	`min-h-screen`

Typography

CSS	Tailwind
`font-size: 0.875rem`	`text-sm`
`font-size: 1rem`	`text-base`
`font-size: 1.25rem`	`text-xl`
`font-size: 2.25rem`	`text-4xl`
`font-weight: 400`	`font-normal`
`font-weight: 600`	`font-semibold`
`font-weight: 700`	`font-bold`
`line-height: 1.5`	`leading-normal`
`line-height: 2`	`leading-loose`
`text-align: center`	`text-center`
`text-decoration: underline`	`underline`
`text-transform: uppercase`	`uppercase`
`letter-spacing: 0.05em`	`tracking-wide`
`color: #6b7280`	`text-gray-500`

Colors

Tailwind has a built-in color palette with shades from 50 (lightest) to 950 (darkest):

/* CSS */
color: #3b82f6;
background-color: #f3f4f6;
border-color: #e5e7eb;

<!-- Tailwind -->
<div class="text-blue-500 bg-gray-100 border-gray-200">...</div>

Common color mappings:

CSS Value	Tailwind Class
`#ffffff`	`bg-white` / `text-white`
`#000000`	`bg-black` / `text-black`
`#3b82f6`	`text-blue-500`
`#ef4444`	`text-red-500`
`#22c55e`	`text-green-500`
`#f59e0b`	`text-amber-500`
`#8b5cf6`	`text-violet-500`
`transparent`	`bg-transparent`

Display and Positioning

CSS	Tailwind
`display: block`	`block`
`display: inline`	`inline`
`display: inline-block`	`inline-block`
`display: flex`	`flex`
`display: inline-flex`	`inline-flex`
`display: grid`	`grid`
`display: none`	`hidden`
`position: relative`	`relative`
`position: absolute`	`absolute`
`position: fixed`	`fixed`
`position: sticky`	`sticky`
`top: 0`	`top-0`
`z-index: 10`	`z-10`
`overflow: hidden`	`overflow-hidden`
`overflow: auto`	`overflow-auto`

Flexbox

CSS	Tailwind
`flex-direction: row`	`flex-row`
`flex-direction: column`	`flex-col`
`justify-content: center`	`justify-center`
`justify-content: space-between`	`justify-between`
`justify-content: flex-end`	`justify-end`
`align-items: center`	`items-center`
`align-items: flex-start`	`items-start`
`align-items: stretch`	`items-stretch`
`flex-wrap: wrap`	`flex-wrap`
`gap: 1rem`	`gap-4`
`flex: 1`	`flex-1`
`flex: none`	`flex-none`

Grid

CSS	Tailwind
`grid-template-columns: repeat(3, 1fr)`	`grid-cols-3`
`grid-template-columns: repeat(12, 1fr)`	`grid-cols-12`
`grid-column: span 2`	`col-span-2`
`grid-column: 1 / -1`	`col-span-full`
`gap: 1.5rem`	`gap-6`
`row-gap: 1rem`	`gap-y-4`
`column-gap: 2rem`	`gap-x-8`

Borders and Rounded Corners

CSS	Tailwind
`border: 1px solid`	`border`
`border: 2px solid`	`border-2`
`border-top: 1px solid`	`border-t`
`border-color: #e5e7eb`	`border-gray-200`
`border-radius: 0.25rem`	`rounded`
`border-radius: 0.5rem`	`rounded-lg`
`border-radius: 9999px`	`rounded-full`
`border-radius: 0`	`rounded-none`

Shadows and Opacity

CSS	Tailwind
`box-shadow: 0 1px 3px rgba(0,0,0,0.12)`	`shadow-sm`
`box-shadow: 0 4px 6px rgba(0,0,0,0.1)`	`shadow-md`
`box-shadow: 0 10px 15px rgba(0,0,0,0.1)`	`shadow-lg`
`box-shadow: none`	`shadow-none`
`opacity: 0.5`	`opacity-50`
`opacity: 0.75`	`opacity-75`

Arbitrary Values

When a design uses a value not in Tailwind’s default scale, use the arbitrary value syntax with square brackets:

/* CSS */
width: 327px;
padding-top: 22px;
color: #1a2b3c;
background: linear-gradient(135deg, #667eea, #764ba2);

<!-- Tailwind arbitrary values -->
<div class="w-[327px] pt-[22px] text-[#1a2b3c] bg-[linear-gradient(135deg,#667eea,#764ba2)]">

Arbitrary values work for any Tailwind utility: h-[calc(100vh-4rem)], grid-cols-[1fr_2fr_1fr], translate-x-[-50%].

Responsive Design

Tailwind uses mobile-first breakpoint prefixes:

Breakpoint	CSS equivalent	Prefix
Mobile (default)	All widths	(none)
SM	`@media (min-width: 640px)`	`sm:`
MD	`@media (min-width: 768px)`	`md:`
LG	`@media (min-width: 1024px)`	`lg:`
XL	`@media (min-width: 1280px)`	`xl:`

Tailwind v4 note: Default breakpoints are unchanged. Custom breakpoints are now defined in CSS with @theme { --breakpoint-3xl: 1920px; } instead of tailwind.config.js.

/* CSS media queries */
.hero {
  font-size: 1.5rem;
}
@media (min-width: 768px) {
  .hero {
    font-size: 2.25rem;
  }
}
@media (min-width: 1024px) {
  .hero {
    font-size: 3rem;
  }
}

<!-- Tailwind responsive classes -->
<h1 class="text-2xl md:text-4xl lg:text-5xl">Hero</h1>

State Variants

Tailwind handles pseudo-classes with variant prefixes:

/* CSS */
.btn:hover {
  background-color: #2563eb;
}
.input:focus {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}
.checkbox:checked {
  background-color: #3b82f6;
}

<!-- Tailwind -->
<button class="bg-blue-600 hover:bg-blue-700">Button</button>
<input class="focus:ring-2 focus:ring-blue-500 focus:outline-none">

Real-World Conversion Example

A typical card component:

/* Before: Custom CSS */
.card {
  background-color: #ffffff;
  border-radius: 0.75rem;
  padding: 1.5rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
  border: 1px solid #f3f4f6;
}

.card-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #111827;
  margin-bottom: 0.5rem;
}

.card-body {
  font-size: 0.875rem;
  color: #6b7280;
  line-height: 1.625;
}

<!-- After: Tailwind -->
<div class="bg-white rounded-xl p-6 shadow-md border border-gray-100">
  <h3 class="text-lg font-semibold text-gray-900 mb-2">Title</h3>
  <p class="text-sm text-gray-500 leading-relaxed">Body text here.</p>
</div>

Migration Strategy for Existing Projects

Start with components, not pages: Convert one component at a time rather than rewriting entire stylesheets. This minimizes risk and keeps the project buildable.

Use @apply as a bridge: If you prefer semantic class names but want Tailwind’s utilities, @apply lets you compose utilities inside a CSS class:

.btn-primary {
  @apply inline-flex items-center px-4 py-2 bg-blue-600 text-white
         font-medium rounded-lg hover:bg-blue-700 transition-colors;
}

Extend the theme for custom values: Instead of arbitrary values everywhere, define recurring custom values in tailwind.config.js:

module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          500: '#1a73e8',
          600: '#1557b0',
        },
      },
      spacing: {
        18: '4.5rem',
        22: '5.5rem',
      },
    },
  },
};

CSS to Tailwind v4: What Changed and How to Adjust

Tailwind v4 shipped in early 2025 with a redesigned engine. If you’re working in a v4 project — or converting CSS to Tailwind v4 classes — here’s what differs from v3.

No More `tailwind.config.js`

v4 moves configuration from a JavaScript file to your CSS:

/* v3: tailwind.config.js */
module.exports = {
  theme: {
    extend: {
      colors: { brand: '#1a73e8' },
      spacing: { 18: '4.5rem' },
    },
  },
};

/* v4: main CSS file */
@import "tailwindcss";

@theme {
  --color-brand: #1a73e8;
  --spacing-18: 4.5rem;
}

The three @tailwind directives (base, components, utilities) are replaced by a single @import "tailwindcss".

CSS Variable Design Tokens

All v4 theme values are CSS custom properties — colors, spacing, font sizes. You can reference them directly in custom styles without config:

.custom-element {
  background-color: var(--color-blue-500);
  padding: var(--spacing-4);
}

Class Name Changes in v4

Some utility defaults shifted. The old “no-suffix” variants became more subtle, and suffixes changed accordingly:

v3 class	v4 equivalent	Change
`shadow`	`shadow-sm`	Default shadow is now subtler; use `shadow-sm` to match v3 `shadow`
`ring`	`ring-3`	Default ring width dropped to 1px; `ring-3` restores v3’s 3px default
`blur`	`blur-sm`	Same scale shift as shadow
`drop-shadow`	`drop-shadow-sm`	Same scale shift

Migrate with the Official Upgrade Tool

npx @tailwindcss/upgrade

This handles converting tailwind.config.js to @theme blocks, renaming deprecated classes in HTML/JSX, and updating @tailwind directives. Run it first, then use our CSS to Tailwind converter for any remaining custom CSS.

Online CSS to Tailwind Converter

For quick one-off conversions, ZeroTool’s CSS to Tailwind converter translates CSS property blocks to their Tailwind equivalents in real time. Paste your CSS on the left, get Tailwind classes on the right — no build step, no installation.

Try the CSS to Tailwind converter →