Press ESC to close
W
Learnweb.safal.me
Utility-First CSS

Tailwind CSS Mastery

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

⚡ 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
📸 Core Utility Classes

🎨 Colors

bg-primary-500
bg-accent-500
bg-success-500
bg-warning-500

📏 Spacing

ClassValue
p-4padding: 1rem
m-4margin: 1rem
px-4padding-left/right: 1rem
mt-8margin-top: 2rem

✏️ Typography Classes

Hello Tailwind CSS! ✨

📱 Responsive Design
📱 Mobile-First Approach:

Tailwind uses a mobile-first breakpoint system. Styles without prefix apply to all sizes, then add prefixes for larger screens!

PrefixMin WidthCSS
(none)0px@media (min-width: 0px)
sm:640px@media (min-width: 640px)
md:768px@media (min-width: 768px)
lg:1024px@media (min-width: 1024px)
xl:1280px@media (min-width: 1280px)

Example: Responsive Grid

grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4

1 column on mobile → 2 on small → 3 on medium → 4 on large screens

🎯 Flexbox Utilities

Item 1
Item 2
Item 3
📐 CSS Grid with Tailwind

Common Grid Patterns

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

🖱️ Hover & State Variants

🎬 Built-in Animations
animate-spin
animate-ping
animate-pulse
animate-bounce

🃏 Card Components

Card Title

This is a sample card component built with Tailwind CSS utilities.

📋 Quick Reference Cheat Sheet

🎨 Colors

  • text-{color}-{shade}
  • bg-{color}-{shade}
  • border-{color}-{shade}
  • ring-{color}-{shade}

📏 Spacing

  • p-{size} / px-{size} / py-{size}
  • m-{size} / mx-{size} / my-{size}
  • space-x-{size} / space-y-{size}
  • gap-{size}

📐 Layout

  • flex / grid
  • items-center / justify-center
  • grid-cols-{n}
  • w-full / h-screen

💡 Best Practices

1

Mobile-First

Start with mobile styles, add responsive prefixes for larger screens.

2

Extract Components

Use @apply in CSS for repeated patterns, or create React components.

3

Use Design Tokens

Customize tailwind.config.js with your brand colors and spacing.

4

Purge Unused CSS

Configure content paths properly to remove unused styles in production.