How this Tailwind CSS track works
- Real Tailwind in the playground — lessons load Tailwind via CDN so classes behave like production (JIT on the CDN build).
- Original lesson copy — we explain patterns and trade-offs in our own words; use official docs as a reference, not a script to paste.
- Prerequisites — finish CSS (flex, grid, cascade) and skim Utility CSS if utility-first thinking is new.
Production apps use npm + PostCSS + purge; this track focuses on markup, design tokens, and responsive composition first.
Install on your device (macOS, Linux, Windows)
Lessons run in your browser on this site—install a modern browser and optional editor for local projects.
macOS
- Use Safari (preinstalled) or install Google Chrome / Firefox.
- Optional editor: VS Code (
brew install --cask visual-studio-code). - Open DevTools with ⌥⌘I (Chrome/Edge) or ⌥⌘C (Safari Web Inspector).
Linux
- Install Chromium or Firefox:
sudo apt update && sudo apt install -y chromium-browser firefox(Debian/Ubuntu; package names vary by distro). - Fedora:
sudo dnf install -y chromium firefox. - Optional editor: VS Code from code.visualstudio.com or
sudo snap install code --classic.
Windows
- Install Microsoft Edge or Chrome.
- Optional editor: VS Code (
winget install Microsoft.VisualStudioCode). - Open DevTools with F12 or Ctrl+Shift+I.
Verify: Open any lesson playground and click Run—output appears without installing a compiler.
Tailwind CSS is a utility-first framework: instead of writing custom selectors for every spacing tweak, you compose designs from a curated set of single-purpose classes like p-4, flex, and text-indigo-600.
How this track differs from plain CSS
If you completed CSS, you already know cascade, flex, and grid. Tailwind does not replace that knowledge—it packages common decisions into predictable class names backed by a design token scale.
Our Utility CSS track teaches the same mindset with a custom tu- prefix. Here you learn industry-standard Tailwind naming used in production React, Vue, and Laravel apps.
Playground setup
Each lesson ships a full HTML document with the Tailwind CDN script. Edit markup and classes; the preview behaves like a JIT-enabled build for learning purposes.
What you will learn
- Spacing, typography, and color tokens
- Flex and grid layout composition
- Responsive prefixes (
md:,lg:) - State variants (
hover:,focus-visible:,dark:) - Customization with
tailwind.configand arbitrary values
Self-check
- In one sentence, what does “utility-first” mean?
- Why do we still need solid CSS fundamentals before leaning on Tailwind?
Interview prep
- What is utility-first CSS in one sentence?
You style by composing small, single-purpose classes in markup instead of writing a new selector for every visual tweak.
- How does this track differ from memorizing tailwindcss.com?
We teach patterns and trade-offs in original copy; official docs are a reference, not the lesson script.