Tailwind CSS
Tailwind CSS
Utility classes for spacing, typography, colors, flexbox, grid, and responsive design — complete Tailwind reference.
📖 6 sections
⏰ 18 min read
✅ Quizzes included
01Spacing & Sizing▼
Padding
p-4 (all), px-4 (horizontal), py-4 (vertical), pt/pb/pl/pr-4
Margin
m-4, mx-4, my-4, mt/mb/ml/mr-4, mx-auto (center)
Width
w-full, w-1/2, w-1/3, w-64, w-screen, w-auto, w-fit
Height
h-full, h-screen, h-64, h-auto, min-h-screen
Max/Min width
max-w-sm/md/lg/xl/2xl/screen-md, min-w-0
Gap
gap-4, gap-x-4, gap-y-2 (in flex/grid containers)
TAILWINDSpacing scale
0=0, 1=4px, 2=8px, 3=12px, 4=16px, 5=20px
6=24px, 8=32px, 10=40px, 12=48px, 16=64px, 20=80px
Custom: p-[20px], w-[350px], h-[calc(100vh-60px)]
02Typography▼
Font size
text-xs/sm/base/lg/xl/2xl/3xl/4xl/5xl/6xl/7xl/8xl/9xl
Font weight
font-thin/light/normal/medium/semibold/bold/extrabold/black
Text align
text-left/center/right/justify
Color
text-gray-500, text-blue-600, text-white, text-slate-900
Line height
leading-tight/snug/normal/relaxed/loose
Letter spacing
tracking-tighter/tight/normal/wide/wider/widest
TAILWINDTypography utilities
font-sans | font-serif | font-mono
truncate (overflow hidden + ellipsis)
break-words | break-all
underline | line-through | no-underline
uppercase | lowercase | capitalize | normal-case
italic | not-italic
select-none | select-all | select-text
03Colors & Background▼
TAILWINDColor system
/* Text colors */
text-{color}-{shade}
text-blue-500, text-red-600, text-green-400

/* Background */
bg-{color}-{shade}
bg-white, bg-gray-100, bg-indigo-600
bg-gradient-to-r from-blue-500 to-purple-600
bg-opacity-50

/* Border */
border, border-2, border-4
border-{color}-{shade}: border-gray-200
border-opacity-50
rounded, rounded-sm, rounded-md, rounded-lg, rounded-xl, rounded-full

/* Shades: 50,100,200,300,400,500,600,700,800,900 */
/* Colors: slate,gray,zinc,red,orange,amber,yellow,lime */
/*         green,teal,cyan,sky,blue,indigo,violet,purple,pink,rose */
04Flexbox & Grid▼
TAILWINDLayout utilities
/* Flexbox */
flex flex-col flex-wrap flex-nowrap
justify-start justify-end justify-center
justify-between justify-around justify-evenly
items-start items-end items-center items-stretch
flex-1 flex-auto flex-none
shrink-0  /* dont shrink (fixed width sidebar) */

/* Grid */
grid
grid-cols-1 grid-cols-2 grid-cols-3 grid-cols-4
grid-cols-12 grid-cols-none
col-span-2 col-span-full
row-span-2

/* Position */
relative absolute fixed sticky
inset-0 (top+right+bottom+left: 0)
top-0 left-0 right-0 bottom-0
z-10 z-50 z-auto
❓ Quiz
How do you center a div both horizontally and vertically in Tailwind?
flex items-center justify-center is the Tailwind way to center items. Apply to the parent container.
05Responsive & Dark Mode▼
TAILWINDResponsive breakpoints
/* Mobile first: no prefix = all sizes */
/* sm: 640px+ */
/* md: 768px+ */
/* lg: 1024px+ */
/* xl: 1280px+ */
/* 2xl: 1536px+ */












/* Dark mode */
.dark:text-white .dark:bg-gray-900

/* darkMode: "class" - toggle with class="dark" on html */
06States & Animations▼
TAILWINDPseudo-classes & transitions
/* Hover, Focus, Active */
hover:bg-blue-600 hover:text-white hover:shadow-lg
focus:ring-2 focus:ring-blue-500 focus:outline-none
active:scale-95
disabled:opacity-50 disabled:cursor-not-allowed

/* Transitions */
transition         /* all properties */
transition-colors  /* only color properties */
transition-transform
duration-200 duration-300
ease-in ease-out ease-in-out

/* Transform */
scale-105 scale-95
translate-x-4 -translate-y-1
rotate-45 rotate-180

/* Animations */
animate-spin animate-ping animate-pulse animate-bounce