Bootcamp
A one-week sprint to be productive with Tailwind across both v3 and v4.
Bootcamp plan
EXAMPLE
# Tailwind bootcamp - 5 working days Day 1 - Tooling: install (Vite, Next, or CLI), editor (Tailwind IntelliSense in VS Code), Prettier plugin for class sorting. Day 2 - Layout: flex, grid, container, responsive prefixes; mobile first. Day 3 - Typography + colour + spacing: theme tokens, Tailwind's design system, dark mode. Day 4 - State + variants: hover, focus, focus-visible, group, peer, dark, responsive. Day 5 - Theming + plugins: @theme (v4) or extend (v3), @tailwindcss/forms + typography. Weekend project: build a small SaaS marketing site - hero, features, pricing, footer. ## Tips - Mobile first - always start without breakpoint prefixes - darkMode: 'class' for control; mediaQuery is too coarse - Use clsx for variants; cva for typed component variants - Extract a component only after the class string is reused three times - Run the official Prettier plugin so class order is consistent in PRs - v4 if you are greenfield; v3 if you have a config you cannot migrate yet ## Capstone Ship a small responsive site + dark mode toggle + an accessible nav. ## Common mistakes to avoid - Using @apply for one-off styles; only when you actually need a reusable class - Reaching for arbitrary values for any non-trivial reuse - Forgetting focus-visible rings on interactive elements - Skipping prefers-reduced-motion for transforms
Why it matters
Tailwind rewards mobile-first + utility-first + theme tokens. Spend an extra hour on layout and dark mode and the rest writes itself. The Prettier plugin alone removes most class-order PR comments.
Tip: Tweak the snippet with Try it Yourself », then sit the quiz at the bottom of the page.
Discussion
Loading…