Introduction

Why Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that lets you build custom designs without ever leaving your HTML. Instead of writing CSS classes and switching between files, you compose styles directly with utility classes:

<button class="bg-blue-600 hover:bg-blue-700 text-white font-semibold px-6 py-3 rounded-lg">
  Get Started

This is the same button you might otherwise write 20 lines of CSS for.

Tailwind is used by thousands of companies and is one of the most popular CSS frameworks in the world. It powers the UIs of companies like GitHub, Shopify, and many others.

What You Will Learn

This course has 15 lessons organized into 4 chapters:

  1. Utilities — Typography, colors, spacing — the building blocks of Tailwind.
  2. Layout — Flexbox, grid, sizing, borders, and shadows.
  3. Components — Build cards, buttons, navbars, and forms.
  4. Responsive — Mobile-first breakpoints, responsive layouts, hover and dark mode variants.

The preview pane renders your Tailwind HTML live via the Tailwind CDN.

Next →