Tailwind CSS Cheatsheet
Fonts
Font Families
Use utility classes for different font families.
<p class="font-sans">Sans-serif text</p>
<p class="font-serif">Serif text</p>
<p class="font-mono">Monospace text</p>
.font-sans → Sans-serif
.font-serif → Serif
.font-mono → Monospace
Font Sizes
Use text-{size} classes to control font size.
<p class="text-sm">Small</p>
<p class="text-base">Base</p>
<p class="text-lg">Large</p>
<p class="text-xl">Extra Large</p>
.text-sm → Small
.text-base → Base
.text-lg → Large
.text-xl → Extra Large
Colors
Text Colors
Use text-{color}-{shade} to style text colors.
<p class="text-red-500">Red</p>
<p class="text-blue-500">Blue</p>
Red text (.text-red-500)
Blue text (.text-blue-500)
Background Colors
Use bg-{color}-{shade} for backgrounds.
<div class="bg-red-200 p-2">Red background</div>
<div class="bg-blue-200 p-2">Blue background</div>
Red background (.bg-red-200)
Blue background (.bg-blue-200)
Grids
Basic Grid
Use grid and grid-cols-{n} to create grids.
<div class="grid grid-cols-3 gap-4">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
Item 1
Item 2
Item 3
Buttons & UI Elements
Buttons
Use padding, colors, rounded corners, and hover states.
<button class="bg-blue-500 text-white px-4 py-2 rounded">Primary</button>
<button class="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600">Success</button>
Inputs & Textareas
Use borders, padding, rounded corners, and focus states.
<input class="border p-2 rounded focus:ring-2 focus:ring-blue-500">
<textarea class="border p-2 rounded"></textarea>
Alerts / Messages
Use background colors, borders, and padding for alerts.
<div class="bg-red-100 border-l-4 border-red-500 p-4">Error</div>
<div class="bg-green-100 border-l-4 border-green-500 p-4">Success</div>
Error message
Success message