A hands-on Tailwind CSS learning site where you build a complete blog across 14 guided chapters. Each chapter adds one real piece of the blog, with a live side-by-side playground to experiment as you go.
| Concern | Choice |
|---|---|
| Framework | Vue 3 (Composition API) |
| Build tool | Vite |
| Styling | Tailwind CSS v3 |
| Router | Vue Router 4 (hash mode) |
| Editor | CodeMirror 6 |
| Preview | Sandboxed <iframe> + Tailwind CDN |
npm install
npm run devOpen http://localhost:5173 in your browser.
npm run build # outputs to dist/
npm run preview # preview the production build locally| # | Slug | Topic |
|---|---|---|
| 1 | utility-first |
Utility-First Thinking |
| 2 | spacing |
Spacing & the Box Model |
| 3 | typography |
Typography |
| 4 | colors |
Colors & Backgrounds |
| 5 | flexbox |
Flexbox |
| 6 | grid |
Grid |
| 7 | header |
Building the Header |
| 8 | hero |
Hero Section |
| 9 | card |
Blog Post Card |
| 10 | card-grid |
Card Grid |
| 11 | footer |
Footer |
| 12 | table |
Data Table |
| 13 | menu |
Dropdown Menu |
| 14 | responsive |
Responsive Design |
src/
├── views/ # HomeView, LearnView, ChapterView, PlaygroundView
├── components/
│ ├── layout/ # AppHeader, ChapterSidebar
│ ├── chapter/ # StepBlock, ClassTable, ChallengeBlock
│ └── playground/ # PlaygroundPanel, CodeEditor, PreviewFrame
├── composables/ # useProgress, usePlayground, useDarkMode
└── data/chapters/ # one JS file per chapter with steps, classes, challenges
- 14 structured chapters — each with concept explanations, numbered steps, a key classes table, and a challenge
- Live playground — CodeMirror editor with instant iframe preview (debounced 300 ms)
- Progress tracking — completion state persisted to
localStorage - Dark mode — toggled via header, persisted to
localStorage - Static hosting — hash-mode router, no server config required