Tailwind CSS Style Guide — Visual Reference & Cheat Sheet

Typography

Font sizes, weights, line heights, and letter spacing utilities.

Font Sizes

text-xsThe quick brown fox (0.75rem)

text-smThe quick brown fox (0.875rem)

text-baseThe quick brown fox (1rem)

text-lgThe quick brown fox (1.125rem)

text-xlThe quick brown fox (1.25rem)

text-2xlThe quick brown fox (1.5rem)

text-3xlThe quick brown fox (1.875rem)

text-4xlThe quick brown fox (2.25rem)

text-5xlThe quick brown fox (3rem)

text-6xlThe quick brown fox (3.75rem)

Font Weights

font-thinAa Bb Cc (100)

font-extralightAa Bb Cc (200)

font-lightAa Bb Cc (300)

font-normalAa Bb Cc (400)

font-mediumAa Bb Cc (500)

font-semiboldAa Bb Cc (600)

font-boldAa Bb Cc (700)

font-extraboldAa Bb Cc (800)

font-blackAa Bb Cc (900)

Line Heights

leading-none

Line height 1. Text sits tightly together with no extra space between lines at all.

leading-tight

Line height 1.25. Text sits fairly tightly together with minimal space between lines.

leading-normal

Line height 1.5. The default line height providing comfortable reading spacing.

leading-relaxed

Line height 1.625. A bit more generous spacing, great for body text and long reads.

leading-loose

Line height 2. Very spacious, works well for large type or special layouts.

Letter Spacing

tracking-tighterLetter spacing -0.05em

tracking-tightLetter spacing -0.025em

tracking-normalLetter spacing 0em

tracking-wideLetter spacing 0.025em

tracking-widerLetter spacing 0.05em

tracking-widestLetter spacing 0.1em

Colors

Tailwind's default color palette. Each swatch shows the class name and hex value.

Slate

50

#f8fafc

100

#f1f5f9

200

#e2e8f0

300

#cbd5e1

400

#94a3b8

500

#64748b

600

#475569

700

#334155

800

#1e293b

900

#0f172a

950

#020617

Gray

50

#f9fafb

100

#f3f4f6

200

#e5e7eb

300

#d1d5db

400

#9ca3af

500

#6b7280

600

#4b5563

700

#374151

800

#1f2937

900

#111827

950

#030712

Red

50

#fef2f2

100

#fee2e2

200

#fecaca

300

#fca5a5

400

#f87171

500

#ef4444

600

#dc2626

700

#b91c1c

800

#991b1b

900

#7f1d1d

950

#450a0a

Orange

50

100

200

300

400

500

600

700

800

900

950

Yellow

50

100

200

300

400

500

600

700

800

900

950

Green

50

100

200

300

400

500

600

700

800

900

950

Teal

50

100

200

300

400

500

600

700

800

900

950

Blue

50

#eff6ff

100

#dbeafe

200

#bfdbfe

300

#93c5fd

400

#60a5fa

500

#3b82f6

600

#2563eb

700

#1d4ed8

800

#1e40af

900

#1e3a8a

950

#172554

Indigo

50

100

200

300

400

500

600

700

800

900

950

Purple

50

100

200

300

400

500

600

700

800

900

950

Pink

50

100

200

300

400

500

600

700

800

900

950

Usage: bg-{color}-{shade} · text-{color}-{shade} · border-{color}-{shade}

Spacing

Padding and margin utilities. The colored area shows the content; the outer border shows the total space consumed.

Padding Scale

p-0

0px

p-1

4px

p-2

8px

p-3

12px

p-4

16px

p-5

20px

p-6

24px

p-8

32px

p-10

40px

p-12

48px

Margin Scale

m-0

m-0

m-2

m-2 (8px)

m-4

m-4 (16px)

m-8

m-8 (32px)

Directional: pt- pr- pb- pl- px- py- · Same for m

Flexbox & Grid

Common layout patterns using flex and grid utilities.

Flex: Center

Centered

flex items-center justify-center

Flex: Space Between

Left

Center

Right

flex items-center justify-between

Flex: Wrap

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

flex flex-wrap gap-3

Flex: Column

Row 1

Row 2

Row 3

flex flex-col gap-2

Grid: 2 Columns

1

2

3

4

grid grid-cols-2 gap-3

Grid: 3 Columns

1

2

3

4

5

6

grid grid-cols-3 gap-3

Grid: 4 Columns (Responsive)

1

2

3

4

5

6

7

8

grid grid-cols-2 md:grid-cols-4 gap-3

Borders & Rounded

Border widths and border-radius utilities.

Border Width

border-0

border-0

border

border

border-2

border-2

border-4

border-4

border-8

border-8

Border Radius

rounded-none

0px

rounded-sm

2px

rounded

4px

rounded-md

6px

rounded-lg

8px

rounded-xl

12px

rounded-2xl

16px

rounded-3xl

24px

rounded-full

9999px

Directional: rounded-t- rounded-r- rounded-b- rounded-l- rounded-tl- etc.

Shadows

Box shadow utilities from subtle to dramatic.

shadow-sm

Subtle shadow for flat elements.

shadow

Default shadow for cards.

shadow-md

Medium depth for dropdowns.

shadow-lg

Prominent shadow for modals.

shadow-xl

Strong depth for overlays.

shadow-2xl

Maximum depth for emphasis.

shadow-inner

Inset shadow for inputs.

shadow-none

Remove shadow entirely.

Responsive Breakpoints

Tailwind uses a mobile-first approach. Prefix any utility with a breakpoint to apply it at that screen size and above.

Prefix	Min Width	CSS	Typical Devices
`sm:`	640px	@media (min-width: 640px)	Large phones (landscape)
`md:`	768px	@media (min-width: 768px)	Tablets
`lg:`	1024px	@media (min-width: 1024px)	Laptops
`xl:`	1280px	@media (min-width: 1280px)	Desktops
`2xl:`	1536px	@media (min-width: 1536px)	Large desktops

Example: class="text-sm md:text-base lg:text-lg"

Live Responsive Demo

Viewport: < 640px (mobile) Viewport: sm (640px+) Viewport: md (768px+) Viewport: lg (1024px+) Viewport: xl (1280px+) Viewport: 2xl (1536px+)

Resize your browser to see the breakpoint change.

Common Patterns

Practical component examples you can copy directly into your project.

Card Component

Featured

Card Title

This is a versatile card pattern commonly used for product listings, blog posts, and content previews.

€129.00

<div class="max-w-sm bg-white rounded-xl shadow-lg overflow-hidden border border-gray-100">
  <div class="h-48 bg-gradient-to-br from-blue-400 to-purple-500"></div>
  <div class="p-5">
    <p class="text-xs font-semibold text-blue-600 uppercase tracking-wide">Featured</p>
    <h4 class="text-lg font-bold text-gray-900 mt-1">Card Title</h4>
    <p class="text-sm text-gray-500 mt-2 leading-relaxed">Description text here.</p>
    <div class="mt-4 flex items-center justify-between">
      <span class="text-lg font-bold text-gray-900">&euro;129.00</span>
      <button class="bg-gray-900 text-white text-sm px-4 py-2 rounded-lg hover:bg-gray-700 transition-colors">Add to Cart</button>
    </div>
  </div>
</div>

Button Set

<!-- Primary -->
<button class="bg-gray-900 text-white text-sm font-medium px-5 py-2.5 rounded-lg hover:bg-gray-700 transition-colors">Primary</button>

<!-- Outline -->
<button class="bg-white text-gray-700 text-sm font-medium px-5 py-2.5 rounded-lg border border-gray-300 hover:bg-gray-50 transition-colors">Outline</button>

<!-- Disabled -->
<button class="bg-gray-200 text-gray-400 text-sm font-medium px-5 py-2.5 rounded-lg cursor-not-allowed" disabled>Disabled</button>

Navigation Bar

<nav class="bg-gray-900 text-white px-6 py-4 flex items-center justify-between">
  <div class="flex items-center gap-2">
    <div class="w-8 h-8 bg-white rounded-lg flex items-center justify-center">
      <span class="text-gray-900 font-black text-sm">W</span>
    </div>
    <span class="font-bold text-lg">Brand</span>
  </div>
  <div class="hidden sm:flex items-center gap-6 text-sm">
    <a href="#" class="text-white hover:text-gray-300">Home</a>
    <a href="#" class="text-gray-400 hover:text-white">Products</a>
    <a href="#" class="text-gray-400 hover:text-white">About</a>
  </div>
  <button class="bg-white text-gray-900 text-sm font-medium px-4 py-2 rounded-lg">Sign In</button>
</nav>

Form Input Group

<div>
  <label class="block text-sm font-medium text-gray-700 mb-1">Email Address</label>
  <input type="email" placeholder="you@example.com"
    class="w-full px-4 py-2.5 border border-gray-300 rounded-lg text-sm
           focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500
           transition-shadow">
</div>

<button class="w-full bg-blue-600 text-white text-sm font-medium px-5 py-2.5 rounded-lg
               hover:bg-blue-500 transition-colors">Sign In</button>