Skip to content
Chapter 03 of 04 · 3 lessons · ~28 min

Tailwind CSS Basics

Install Tailwind CSS, learn the utility-first workflow and build layouts with flexbox and grid utilities.

YOUR PROGRESS0%
/ Lessons in this chapter
07
How to Install Tailwind CSS How to set up Tailwind CSS v4 with Vite, the CLI or the CDN, and confirm it works. Coming soon
08
Tailwind CSS Tutorial for Beginners How Tailwind's utility classes work and how to build components by combining them. Coming soon
09
Flexbox and Grid in Tailwind How to build common layouts with Tailwind's flex and grid utilities. Coming soon

Chapter practice task

Task: Install Tailwind and build a features section with flex and grid utilities

  1. Set up Tailwind CSS with Vite or the CLI.
  2. Build a hero with spacing, typography and color utilities.
  3. Build a three-column features grid that becomes one column on mobile.
  4. Build a navbar with flexbox utilities.

By the end of this chapter

  • You have a working Tailwind setup
  • You can read and write Tailwind utility classes confidently
  • You can lay out pages with flex and grid utilities

Quick answers for this chapter

Does Tailwind need Node.js?

For real projects, yes (with Vite, the CLI or a framework). A browser CDN build exists for quick experiments.

Will my CSS file be huge?

No. Tailwind only generates the classes you use, so production CSS is usually small.

Is Tailwind v4 different from v3?

Yes. v4 uses CSS-first configuration with @import "tailwindcss" and @theme instead of a JavaScript config file by default.