Tailwind CSS Cheatsheet
A comprehensive guide to Tailwind CSS utility classes.
Typography
text-xs: The quick brown fox...
text-sm: The quick brown fox...
text-base: The quick brown fox...
text-lg: The quick brown fox...
text-xl: The quick brown fox...
text-2xl: The quick brown fox...
text-3xl font-light
text-4xl font-medium
text-5xl font-bold
text-6xl font-black italic
Wavy underline.
Line-through
Uppercase
LOWERCASE
Capitalize
Colors
bg-red-500
bg-yellow-500
bg-green-500
bg-blue-500
bg-indigo-500
bg-purple-500
Text color (text-red-600)
Text color (text-green-600)
Border color (border-blue-400)
Sizing, Spacing & Borders
Width
w-1/4
w-1/2
w-3/4
w-full
w-auto
Margin & Padding
I have margin `m-8` and padding `p-8`.
Padding
Padding X & Y
Padding Top
Borders
border
border-2
border-4 dashed
border-bottom
rounded-md
rounded-full
Flexbox & Grid
Flexbox
Item 1
Item 2
Item 3
justify-between
Item 1
Item 2
Item 3
items-center
Item 1
Item 2
Item 3
Grid
1
2
3
4
5 (col-span-2)
6
7
8
9
Effects & Transitions
shadow-sm
shadow-md
shadow-lg
shadow-xl
shadow-2xl
opacity-100
opacity-75
opacity-50
opacity-25
Interactivity & Responsive
States (Hover, Focus, Active)
Responsive Design
I change properties based on screen size. Resize your browser!
My width changes
My color changes
Animation
Bounce