Tailwind CSS

Tailwind CSS is a utility-first CSS framework that lets you build custom designs directly in your HTML using small, composable utility classes. Instead of writing custom CSS, you compose your UI from hundreds of pre-built classes like flex, pt-4, text-center, and bg-blue-500.

Analogy: Traditional CSS is like cooking from scratch — buying every ingredient and following a recipe. Tailwind is like having a kitchen full of pre-chopped ingredients — you just grab what you need and combine them fast.

Learning Path

flowchart TB
    Basics["01 Basics<br/>What, Setup, Utility-First"] --> Core["02 Core Utilities<br/>Spacing, Colors, Typography"]
    Core --> Layout["03 Layout<br/>Flexbox, Grid, Responsive, States"]
    Layout --> Advanced["04 Advanced<br/>Custom Theme, @apply, Plugins"]
    Advanced --> Interview["05 Interview<br/>Common Questions"]

    style Basics fill:#7c3aed,color:#fff
    style Core fill:#4f46e5,color:#fff
    style Layout fill:#059669,color:#fff
    style Advanced fill:#d97706,color:#fff
    style Interview fill:#6366f1,color:#fff

Sections

Section	What You’ll Learn
01 Basics	What is utility-first CSS, setting up Tailwind, the utility-first mindset
02 Core Utilities	Spacing scale, colors, typography, backgrounds, borders, shadows
03 Layout	Flexbox, Grid, responsive breakpoints, hover/focus/dark variants
04 Advanced	Customizing the theme, `@apply`, plugins, best practices
05 Interview	Common Tailwind CSS interview questions and answers

Prerequisites

Basic HTML knowledge (if needed, see the HTML & CSS track)
Basic CSS knowledge (selectors, properties, responsive design)
A code editor (VS Code recommended)

How This Track Works

Each page starts with an analogy or plain-English explanation
Concepts are followed by small HTML snippets with Tailwind classes and visual results
Pages end with an “In Simple Words” summary
Mermaid diagrams illustrate key concepts visually

Start with What is Tailwind CSS? to begin!