Tailwind CSS Cheat Sheet

Utility-first CSS classes for rapid UI development.

Jump To Section
Layout Interactivity Typography Effects
Pro Tip

Use the Ctrl + F shortcut to quickly find specific commands in this cheat sheet.

Layout

Concept / Tag Code Snippet Description
Grid Layout 
grid grid-cols-2 md:grid-cols-4 gap-4
 Responsive grid.
Flex Center 
flex items-center justify-center
 Perfect centering.

Interactivity

Concept / Tag Code Snippet Description
Hover States 
bg-blue-500 hover:bg-blue-700
 State modifiers.
Group Hover 
group-hover:opacity-100
 Hover parent, affect child.

Typography

Concept / Tag Code Snippet Description
Truncate 
truncate max-w-sm
 Text overflow with dots.

Effects

Concept / Tag Code Snippet Description
Drop Shadow 
shadow-md | shadow-lg | shadow-xl
 Elevation.
Rounded 
rounded-lg | rounded-full
 Corner rounding.

Explore More Cheat Sheets

HTML Guide
CSS Guide
JavaScript Guide