Day 3 - Utility Classes

Quickly style elements with Tailwind's comprehensive utility classes.

1. Text Colors

Use text-{color}-{shade}:

text-indigo-600

Primary text

text-gray-500

Secondary text

text-green-600

Success text

text-red-600

Danger text

text-amber-500

Warning text

text-sky-500

Info text

text-gray-400

Muted text

text-gray-900

Dark text

2. Background Colors

Use bg-{color}-{shade}:

bg-indigo-500

bg-gray-500

bg-green-500

bg-red-500

bg-amber-400

bg-sky-400

bg-gray-100

bg-gray-900

💡 Tip: Use text-white on dark backgrounds and text-gray-900 on light backgrounds to ensure readability.

3. Spacing (Padding & Margin)

Shorthand: {property}{sides}-{size}

Properties

p = Padding
m = Margin

Sides

t = top
b = bottom
l = left
r = right
x = left + right
y = top + bottom

Scale (1 unit = 4px)

p-0

p-1 (4px)

p-2 (8px)

p-4 (16px)

p-6 (24px)

p-8 (32px)

4. Display Utilities

block

Full width block

inline-block

Inline Block

hidden

(hidden element)

flex

A B C

grid grid-cols-3

1 2 3

md:hidden

Mobile only Desktop only

5. Border Utilities

border

1px border

border-2 border-indigo-500

2px border

border-4 border-indigo-500

4px border

rounded

Rounded sm

rounded-xl

Rounded XL

rounded-full

Rounded Full

6. Shadow Utilities

shadow-sm

shadow

shadow-md

shadow-lg

shadow-xl

shadow-2xl

← Previous: Images Next: Components →