Tailwind CSS

Lessons

1. 1The Utility-First ApproachWith plain CSS you name a class and then write rules for it. With Tailwind each class applies one style, such as `p-4` for `padding: 1rem`. You'll see how that changes the way you style a page.
2. 2Spacing & SizingYou'll learn Tailwind's spacing and sizing scale, which goes up in `0.25rem` steps: `p-4` is 1rem of padding, `m-8` is 2rem of margin, `w-1/2` is 50% width. Once you know the scale you rarely need to look values up.
3. 3Typography & ColorsYou'll learn Tailwind's color palette and its text utilities for size, weight, line height and letter spacing. Every value is available by name, which keeps styles consistent.
4. 4Flexbox & GridYou'll learn the utilities for Flexbox and CSS Grid. Common layouts take only a few classes, for example `flex items-center justify-between` for a toolbar or `grid grid-cols-3 gap-6` for a three-column grid.
5. 5Responsive Design & StatesYou'll learn how prefixes like `sm:` and `lg:` apply styles at larger screen sizes, and how `hover:` and `focus:` style interactive states. Tailwind is mobile-first, so unprefixed classes apply at every size.
6. 6Building ComponentsYou'll learn how to avoid repeating the same long class lists: extract components in React or Vue, or group utilities with `@apply` in plain HTML projects.
7. 7Mini Project: Landing PageYou'll build a landing page hero section with Tailwind, including navigation, a headline, supporting text, call-to-action buttons and a responsive layout.
8. 8Tailwind CheatsheetThe utility classes you reach for daily, on one page.

Install it on your own computer

Install Tailwind with npm and set it up with PostCSS. It works with most tools and frameworks, including Vite, Next.js, Astro and plain HTML. You do not need this to follow the lessons: the examples run in your browser.

# Via Vite (recommended for new projects):
npm create vite@latest my-project -- --template vanilla
cd my-project
npm install -D tailwindcss @tailwindcss/vite

# Edit vite.config.js to add the Tailwind plugin,
# then add @import "tailwindcss" to your CSS file.

# Or standalone for plain HTML:
npm install -D tailwindcss
npx tailwindcss init

What people build with Tailwind CSS

Learn the basics first, then pick up these tools when a project needs them.