Tailwind CSS is a utility-first CSS framework that provides low-level utility classes for building custom designs. Instead of writing traditional CSS with selectors, properties, and values in separate files, you apply pre-defined classes directly to HTML elements. This approach eliminates the need to write custom CSS for most styling needs.
Tailwind has become one of the most popular CSS frameworks, used by companies like GitHub, Shopify, Netflix, NASA, and countless startups. It provides a comprehensive design system with consistent spacing scales, color palettes, typography options, and responsive utilities out of the box.
Traditional CSS separates structure (HTML) from presentation (CSS). Utility-first reverses this by applying styles directly where they are used:
<!-- Traditional CSS -->
<div class="card">
<h2 class="card-title">Hello</h2>
<p class="card-body">World</p>
</div>
<style>
.card {
display: flex;
flex-direction: column;
padding: 1.5rem;
border-radius: 0.5rem;
border: 1px solid #e5e7eb;
}
.card-title {
font-size: 1.25rem;
font-weight: 700;
margin-bottom: 0.5rem;
}
.card-body {
font-size: 0.875rem;
color: #6b7280;
}
</style>
<!-- Tailwind CSS -->
<div class="flex flex-col p-6 rounded-lg border border-gray-200">
<h2 class="text-xl font-bold mb-2">Hello</h2>
<p class="text-sm text-gray-500">World</p>
</div>Tailwind uses a numeric spacing scale based on 0.25rem increments:
/* CSS Tailwind */
padding: 0; /* p-0 */
padding: 0.25rem; /* p-1 (4px) */
padding: 0.5rem; /* p-2 (8px) */
padding: 0.75rem; /* p-3 (12px) */
padding: 1rem; /* p-4 (16px) */
padding: 1.25rem; /* p-5 (20px) */
padding: 1.5rem; /* p-6 (24px) */
padding: 2rem; /* p-8 (32px) */
padding: 2.5rem; /* p-10 (40px) */
padding: 3rem; /* p-12 (48px) */
padding: 4rem; /* p-16 (64px) */
/* Directional */
margin-top: 1rem; /* mt-4 */
margin-bottom: 1rem; /* mb-4 */
padding-left: 2rem; /* pl-8 */
padding-right: 2rem; /* pr-8 */
/* Axis shortcuts */
margin: 0 1rem; /* mx-4 */
padding: 1rem 0; /* py-4 */
/* Negative margins */
margin-top: -1rem; /* -mt-4 */margin-left: auto; /* ml-auto */
margin-right: auto; /* mr-auto */
margin: 0 auto; /* mx-auto *//* Font Size */
font-size: 0.75rem; /* text-xs (12px) */
font-size: 0.875rem; /* text-sm (14px) */
font-size: 1rem; /* text-base (16px) */
font-size: 1.125rem; /* text-lg (18px) */
font-size: 1.25rem; /* text-xl (20px) */
font-size: 1.5rem; /* text-2xl (24px) */
font-size: 1.875rem; /* text-3xl (30px) */
font-size: 2.25rem; /* text-4xl (36px) */
font-size: 3rem; /* text-5xl (48px) */
/* Font Weight */
font-weight: 400; /* font-normal */
font-weight: 500; /* font-medium */
font-weight: 600; /* font-semibold */
font-weight: 700; /* font-bold */
font-weight: 800; /* font-extrabold */
/* Text Alignment */
text-align: left; /* text-left */
text-align: center; /* text-center */
text-align: right; /* text-right */
/* Text Transform */
text-transform: uppercase; /* uppercase */
text-transform: lowercase; /* lowercase */
text-transform: capitalize; /* capitalize */
/* Text Decoration */
text-decoration: underline; /* underline */
text-decoration: line-through; /* line-through */
text-decoration: none; /* no-underline */
/* Line Height */
line-height: 1; /* leading-none */
line-height: 1.25; /* leading-tight */
line-height: 1.5; /* leading-normal */
line-height: 2; /* leading-loose */Tailwind provides a comprehensive color palette with 10 shades per color:
/* Text Color */
color: #000; /* text-black */
color: #fff; /* text-white */
color: #111827; /* text-gray-900 */
color: #6b7280; /* text-gray-500 */
color: #ef4444; /* text-red-500 */
color: #3b82f6; /* text-blue-500 */
/* Background Color */
background-color: #fff; /* bg-white */
background-color: #f9fafb; /* bg-gray-50 */
background-color: #3b82f6; /* bg-blue-500 */
background-color: transparent; /* bg-transparent */
/* Border Color */
border-color: #e5e7eb; /* border-gray-200 */
border-color: #3b82f6; /* border-blue-500 */
/* Opacity */
opacity: 0.5; /* opacity-50 */
opacity: 0.75; /* opacity-75 */<!-- Custom hex color -->
<p class="text-[#326CE5]">Custom blue</p>
<div class="bg-[#1a1a2e]">Custom dark</div>/* Display */
display: block; /* block */
display: flex; /* flex */
display: grid; /* grid */
display: inline-block; /* inline-block */
display: none; /* hidden */
display: inline-flex; /* inline-flex */
/* Position */
position: relative; /* relative */
position: absolute; /* absolute */
position: fixed; /* fixed */
position: sticky; /* sticky */
/* Sizing */
width: 100%; /* w-full */
width: 50%; /* w-1/2 */
width: auto; /* w-auto */
height: 100vh; /* h-screen */
max-width: 1280px; /* max-w-7xl */
/* Overflow */
overflow: hidden; /* overflow-hidden */
overflow: auto; /* overflow-auto */
overflow: scroll; /* overflow-scroll *//* CSS Tailwind */
display: flex; /* flex */
flex-direction: column; /* flex-col */
flex-direction: row; /* flex-row */
flex-wrap: wrap; /* flex-wrap */
align-items: center; /* items-center */
align-items: flex-start; /* items-start */
justify-content: center; /* justify-center */
justify-content: space-between; /* justify-between */
flex: 1; /* flex-1 */
flex-grow: 1; /* grow */
flex-shrink: 0; /* shrink-0 */
gap: 1rem; /* gap-4 */
/* Complete flex example */
/* CSS */
.container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
}
/* Tailwind */
<div class="flex flex-row items-center justify-between gap-4 flex-wrap">/* CSS Tailwind */
display: grid; /* grid */
grid-template-columns: repeat(3, 1fr); /* grid-cols-3 */
grid-template-columns: repeat(4, 1fr); /* grid-cols-4 */
grid-template-rows: repeat(2, 1fr); /* grid-rows-2 */
gap: 1.5rem; /* gap-6 */
column-gap: 1rem; /* gap-x-4 */
row-gap: 2rem; /* gap-y-8 */
grid-column: span 2 / span 2; /* col-span-2 */
/* Complete grid example */
/* CSS */
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
/* Tailwind */
<div class="grid grid-cols-3 gap-6">Tailwind uses a mobile-first approach with responsive prefixes:
/* Tailwind breakpoints */
sm: 640px /* @media (min-width: 640px) */
md: 768px /* @media (min-width: 768px) */
lg: 1024px /* @media (min-width: 1024px) */
xl: 1280px /* @media (min-width: 1280px) */
2xl: 1536px /* @media (min-width: 1536px) */
/* CSS */
.card { padding: 1rem; }
@media (min-width: 768px) { .card { padding: 2rem; } }
@media (min-width: 1024px) { .card { padding: 3rem; } }
/* Tailwind */
<div class="p-4 md:p-8 lg:p-12">
/* Responsive grid */
/* CSS */
.grid { display: grid; grid-template-columns: 1fr; }
@media (min-width: 768px) {
.grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
.grid { grid-template-columns: repeat(3, 1fr); }
}
/* Tailwind */
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">When Tailwind's default scale does not include the exact value you need, use arbitrary values:
<!-- Arbitrary values with square brackets -->
<div class="p-[13px]"> <!-- padding: 13px -->
<div class="w-[calc(100%-2rem)]"> <!-- width: calc(100% - 2rem) -->
<div class="text-[#326CE5]"> <!-- color: #326CE5 -->
<div class="grid-cols-[200px_1fr]"> <!-- custom grid -->
<!-- Extend in tailwind.config.js -->
module.exports = {
theme: {
extend: {
spacing: {
'13': '3.25rem',
'128': '32rem',
},
colors: {
brand: '#326CE5',
},
borderRadius: {
'4xl': '2rem',
},
},
},
}Converting a project from traditional CSS to Tailwind is best done incrementally:
/* Before: traditional CSS */
.btn-primary {
display: inline-flex;
align-items: center;
padding: 0.5rem 1rem;
background-color: #3b82f6;
color: white;
border-radius: 0.375rem;
font-weight: 600;
font-size: 0.875rem;
}
/* After: Tailwind */
<button class="inline-flex items-center px-4 py-2
bg-blue-500 text-white rounded-md
font-semibold text-sm">
Click me
</button>/* Transition strategy: use @apply in CSS */
.btn-primary {
@apply inline-flex items-center px-4 py-2
bg-blue-500 text-white rounded-md
font-semibold text-sm;
}
/* This keeps your HTML classes simple while
using Tailwind's design tokens */Our free CSS to Tailwind Converter automates the conversion process for common CSS properties.
Paste your CSS code and get Tailwind utility classes instantly. Supports spacing, colors, layout, flexbox, grid, and responsive breakpoints -- all in your browser.
Try the Tailwind Converter