SESSION 045 — Tailwind CSS

CONCEPTS.UNLOCKED

🎯

Utility-First CSS

Instead of writing custom CSS classes, compose small utility classes: flex gap-4 p-2 bg-slate-900 text-white. Each class does one thing. Combine them for any design.

⚙

Tailwind Setup

Install, configure tailwind.config.js, add to project. Tailwind scans your files for class names and generates only the CSS you actually use — tiny production builds.

📐

Common Utilities

Layout: flex, grid, gap-4. Spacing: p-4, m-2. Colors: bg-slate-900, text-white. Typography: text-sm, font-bold. A consistent design vocabulary.

📱

Responsive: Breakpoint Prefixes

md:flex-row — horizontal on medium screens and up. Mobile-first by default: styles apply to all sizes unless prefixed with sm:, md:, lg:, or xl:.

🌙

Dark Mode

dark:bg-slate-900 — styles applied when dark mode is active. Toggle between light and dark themes with a single class prefix. No separate stylesheet needed.

⚖

Tailwind vs Custom CSS

Tailwind shines for rapid component styling and consistency. Custom CSS is better for complex animations, highly unique designs, or Canvas-based rendering. Know when to use each.

HANDS-ON.TASKS

Install Tailwind

▶

npm install -D tailwindcss @tailwindcss/vite

Configure and add to main CSS:

@import "tailwindcss";

Tailwind integrates with Vite's build pipeline. It scans your JSX files for class names and generates only the CSS you use — zero bloat in production.

Migrate the Toolbar

▶

// Before (plain CSS):
<nav className="toolbar">
  <button className="tool-btn active">
    Upload
  </button>
</nav>

// After (Tailwind):
<nav className="flex flex-col items-center
  gap-1 bg-slate-900 p-2 w-14">
  <button className="w-10 h-10 rounded-lg
    bg-slate-800 hover:bg-slate-700
    text-slate-200 text-xs border border-slate-700
    hover:border-cyan-500 transition-colors">
    Upload
  </button>
</nav>

Every style is visible inline. No switching to a CSS file to see what "toolbar" means. hover:, focus:, and transition- classes handle interactivity directly in the markup.

Migrate 5 Components

▶

Convert from plain CSS to Tailwind:

Component	Key Utilities
Toolbar	flex, flex-col, gap-1, bg-slate-900
ToolButton	w-10, h-10, rounded-lg, hover:bg-slate-700
FilterSlider	flex, items-center, gap-2, text-sm
SettingsPanel	flex, flex-col, gap-3, p-4, overflow-y-auto
Toast	fixed, bottom-4, right-4, rounded-md, shadow-lg

Responsive Layout

▶

Use responsive classes for mobile-first layout:

<div className="flex flex-col md:flex-row">
  {/* Stacked on mobile, side-by-side on desktop */}
</div>

flex-col applies to all sizes (mobile first). md:flex-row overrides at medium screens (768px+). No media queries written by hand.

Extract Repeated Patterns

▶

Extract repeated patterns into component props rather than CSS classes. The component itself is the reusable unit — not the class name.

Compare: development speed with Tailwind vs writing custom CSS.

Close the Ticket

▶

git switch -c refactor/PIXELCRAFT-033-tailwind
git add src/ tailwind.config.js
git commit -m "Migrate 5 components to Tailwind CSS (PIXELCRAFT-033)"
git push origin refactor/PIXELCRAFT-033-tailwind
# PR → Review → Merge → Close ticket ✅

CS.DEEP-DIVE

Convention over configuration.

Tailwind provides a fixed set of design tokens. By constraining choices, it speeds up development and enforces consistency.

// Tailwind's design tokens:

Spacing    → 1–96 in 0.25rem steps
Colors     → a consistent palette
Breakpoints → sm / md / lg / xl

// Same principle everywhere:

Rails          → "convention over config"
Material Design → consistent design system
Linting rules  → constrained code style

// Constrained systems are often MORE
// productive than unconstrained ones
// because you spend less time on decisions
// and more time on building.

REF.MATERIAL

ARTICLE

Tailwind CSS Documentation

Tailwind Labs

The official docs: installation, utility reference, responsive design, dark mode, customization. The best reference for every Tailwind class.

TAILWINDOFFICIALESSENTIAL

VIDEO

Tailwind in 100 Seconds — Fireship

Fireship

Ultra-fast Tailwind overview: utility-first philosophy, common classes, responsive prefixes, and why teams adopt it.

TAILWINDQUICK

VIDEO

Tailwind CSS Tutorial — Net Ninja

The Net Ninja

Comprehensive tutorial: setup, utilities, responsive design, hover/focus states, dark mode, and building real components.

TAILWINDTUTORIAL

TOOL

Tailwind UI — Official Component Library

Tailwind Labs

Production-ready Tailwind components: navigation, forms, modals, cards, dashboards. Study how professionals structure Tailwind markup.

TAILWINDCOMPONENTSREFERENCE

ARTICLE

CSS Utility Classes and "Separation of Concerns"

Adam Wathan (Tailwind creator)

The philosophy behind utility-first CSS: why traditional BEM/OOCSS approaches fail at scale, and how utilities solve the problem differently.

PHILOSOPHYARCHITECTUREDEEP

TAILWIND CSS