Utility-First CSS

Tailwind CSS Mastery

Learn the utility-first approach to styling. Build beautiful interfaces faster than ever with Tailwind CSS!

📚 Table of Contents

🌱 Beginner

• What is a <div>?
• How classes work
• Colors & backgrounds
• Spacing (padding/margin)
• Typography basics
• Borders & shadows

🚀 Intermediate

• Flexbox layout
• CSS Grid
• Responsive design
• Hover & states
• Building cards
• Layout patterns

⚡ Advanced

• Custom animations
• Glassmorphism
• Complex gradients
• Group & peer states
• Arbitrary values
• Performance tips

⚡ What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that lets you build designs directly in your HTML using pre-built classes. Instead of writing custom CSS, you compose styles using utility classes!

Fast DevelopmentConsistent DesignResponsiveCustomizable

🏗️ Understanding HTML Structure

🤔 What is a <div>?

A <div> is a container element in HTML. Think of it like a box that can hold other content. By itself, it does nothing visually - but with Tailwind classes, you can make it look however you want!

📝 The Code:

<div class="bg-blue-500 p-4">
  Hello World!
</div>

👀 The Result:

Hello World!

bg-blue-500 = blue background
p-4 = padding of 1rem (16px)

🎯 How Tailwind Classes Work:

Write your HTML element

<div></div>

Add class attribute

<div class=""></div>

Add Tailwind utility classes (space-separated)

<div class="bg-red-500 p-4 rounded-lg"></div>

🧱 Common HTML Elements You will Style:

<div>

Container/box - most common

<p>

Paragraph text

<button>

Clickable button

<span>

Inline text wrapper

<h1> to <h6>

Headings

<img>

Images

🎨 Colors & Backgrounds

💡 Color Pattern:

Tailwind colors follow a pattern: {property}-{color}-{shade}
Example: bg-blue-500 or text-red-600

🎯 Color Prefixes:

bg-Background color

text-Text color

border-Border color

ring-Ring/outline color

📊 Shade Numbers (100-900):

100 - Lightest

300 - Light

500 - Default

700 - Dark

900 - Darkest

�� Available Colors:

red

orange

yellow

green

blue

purple

pink

gray

slate

cyan

emerald

indigo

🎨 Try Colors Yourself!

Quick Presets:

✏️ EDIT TAILWIND CLASSES

✅ Classes look good!

Hello! I am a colored box! 📦

💡 Tip: Try combining classes like bg-blue-500 text-white p-4 rounded-lg hover:bg-blue-600

📏 Spacing: Padding & Margin

🎯 Padding vs Margin:

Padding = Space INSIDE the box (between border and content)
Margin = Space OUTSIDE the box (between this box and others)

📊 Visual Explanation:

Margin area

Padding area

Content

📐 Spacing Scale:

Class	Value	Pixels
p-0	0rem	0px
p-1	0.25rem	4px
p-2	0.5rem	8px
p-4	1rem	16px
p-6	1.5rem	24px
p-8	2rem	32px

🎯 Direction Shortcuts:

p-4All sides

px-4Left & Right

py-4Top & Bottom

pt-4Top only

pb-4Bottom only

pl-4Left only

pr-4Right only

Same pattern works for margin: m-, mx-, my-, mt-, etc.

📏 Try Spacing Yourself!

Quick Presets:

✏️ EDIT TAILWIND CLASSES

✅ Classes look good!

See how padding changes! 📦

💡 Tip: Try combining classes like bg-blue-500 text-white p-4 rounded-lg hover:bg-blue-600

✏️ Typography: Text Styling

📊 Text Sizes:

text-xsExtra Small Text

text-smSmall Text

text-baseBase Text (default)

text-lgLarge Text

text-xlExtra Large Text

text-2xl2X Large Text

text-4xl4X Large

💪 Font Weights:

font-thin (100)

font-light (300)

font-normal (400)

font-medium (500)

font-semibold (600)

font-bold (700)

font-extrabold (800)

🎨 Other Text Styles:

italic - Italic text

underline - Underlined

line-through - Strikethrough

uppercase

LOWERCASE (applied)

capitalize each word

tracking-wide (letter spacing)

✏️ Try Typography!

Quick Presets:

✏️ EDIT TAILWIND CLASSES

❌"font-bold": Use "font-bold" for bold text

⚠️"2xl" might not be a standard Tailwind color. Check spelling!

Hello Tailwind CSS! ✨

💡 Tip: Try combining classes like bg-blue-500 text-white p-4 rounded-lg hover:bg-blue-600

🔲 Borders & Rounded Corners

📏 Border Width:

border

border-2

border-4

🔵 Rounded Corners:

No rounded

rounded

rounded-lg

rounded-xl

rounded-full

🔲 Try Borders & Shadows!

Quick Presets:

✏️ EDIT TAILWIND CLASSES

⚠️"dark" might not be a standard Tailwind color. Check spelling!

Styled Box! ✨

💡 Tip: Try combining classes like bg-blue-500 text-white p-4 rounded-lg hover:bg-blue-600

📋 Beginner Cheat Sheet

🎨 Colors

bg-{color}-500
text-{color}-500
border-{color}-500

📏 Spacing

p-{0-12}
m-{0-12}
px-4 py-2

✏️ Text

text-sm / text-xl
font-bold
rounded-lg