Tailwind CSS Cheatsheet

Layout

Utility Class	Description
container	Centers the content.
block / inline-block	Block-level or inline-block.
flex / grid	Flexbox or Grid layout.
flex-col / flex-row	Flex direction column/row.
items-center	Align items vertically.
justify-center	Align items horizontally.
gap-1 - gap-12	Spacing between items.

Spacing

Utility Class	Description
m-{size}	Margin: mt, mb, ml, mr.
p-{size}	Padding: pt, pb, pl, pr.
{size} options	0, px, 1 - 96, etc.

Typography

Utility Class	Description
text-{size}	Font size (e.g., text-sm).
font-bold	Bold text.
font-medium	Medium text.
font-light	Light text.
text-left / text-center / text-right	Text alignment.
text-gray-500	Text color.

Background

Utility Class	Description
bg-{color}	Background color.
bg-gradient-to-r	Gradient from left to right.
bg-opacity-{value}	Background transparency.

Borders

Utility Class	Description
border	Default border width.
border-{color}	Border color.
rounded / rounded-{size}	Rounded corners.

Shadows

Utility Class	Description
shadow-sm	Small shadow.
shadow-md	Medium shadow.
shadow-lg	Large shadow.
shadow-none	No shadow.

Sizing

Utility Class	Description
w-{size} / h-{size}	Width/Height (full, auto, percentages).
max-w-{size}	Maximum width.
min-h-{size}	Minimum height.

Flexbox Alignment

Utility Class	Description
justify-start	Align items at the start.
justify-between	Space between items.
items-start	Align items top.

Positioning

Utility Class	Description
absolute / relative	Positioning modes.
top-{value} / left-{value}	Offset values.
z-{value}	Z-index (stacking).

Colors

Class Examples	Description
text-blue-500	Blue text color.
bg-green-300	Green background color.
border-red-400	Red border color.

Transitions & Animation

Utility Class	Description
transition	Enables transitions.
duration-{ms}	Duration of transitions.
ease-in / ease-out	Timing functions.
animate-bounce	Bounce animation.