# Les 10: Styling: Tailwind CSS & shadcn/ui

---

## Hoofdstuk
**Deel 3: Full-Stack Development** (Les 9-12)

## Beschrijving
Styling je applicatie met Tailwind CSS en modern components met shadcn/ui. Utility-first approach, component libraries, themeing en dark mode implementatie.

---

## Te Behandelen (~45 min)

- Waarom Tailwind? Utility-first CSS approach vs traditioneel CSS
- Tailwind in Next.js (meestal al ingesteld)
- Core utilities: spacing, colors, flexbox, grid, responsive (mobile-first)
- Tailwind components: buttons, cards, forms patterns
- Wat is shadcn/ui? Beautifully designed component library
- shadcn/ui installatie en configuratie
- shadcn/ui components: Button, Card, Input, Dialog, etc.
- Custom Tailwind color themes (tailwind.config.ts)
- Dark mode implementation met Tailwind
- Performance: class optimization, purging unused styles

---

## Tools
- Tailwind CSS
- shadcn/ui
- Cursor
- TypeScript

---

## Lesopdracht (2 uur, klassikaal)

### Styling Je Mini-Project

**Groepsdiscussie (15 min):**
Bespreek klassikaal de Full-Stack Mini Project ervaringen uit Les 9 - welke onderdelen werkten goed en waar liepen jullie vast?

**Deel 1: Tailwind Basics (30 min)**

1. Open je mini-project uit Les 9
2. Refactor bestaande components met Tailwind classes:
   - Button: `bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded`
   - Card: `bg-white rounded-lg shadow-lg p-6`
   - Form inputs: `w-full px-3 py-2 border border-gray-300 rounded-md`
3. Voeg spacing, colors, responsive design toe

**Deel 2: shadcn/ui Setup & Components (45 min)**

1. Install shadcn/ui: `npx shadcn-ui@latest init`
2. Install components: `npx shadcn-ui@latest add button input card dialog`
3. Replace je custom components met shadcn versions
4. Test styling en interactiviteit

**Deel 3: Theme & Dark Mode (30 min)**

1. Customize Tailwind color scheme in `tailwind.config.ts`
2. Voeg dark mode toggle toe (localStorage + CSS class toggle)
3. Zorg dat je hele app responsive is (mobile-first)

### Deliverable
- Gerestyled mini-project met Tailwind + shadcn/ui
- Dark mode toggle werkend
- Mobile responsive design
- GitHub commit met improvements

---

## Huiswerk (2 uur)

### Vervolg Styling & Polish

**Deel 1: Component Library Uitbreiden (1 uur)**

Install en integreer meer shadcn/ui components:
- Select, Tabs, Modal/Dialog
- Forms package voor betere form handling
- Toast notifications
- Zorg dat je hele app consistent gelayout is

**Deel 2: Custom Theme (30 min)**

Maak je eigen color palette in `tailwind.config.ts`:
- Primary, secondary, accent colors
- Custom spacing, typography
- Test in light en dark mode

**Deel 3: Accessibility & Polish (30 min)**

1. Voeg alt text toe aan images
2. Zorg voor proper heading hierarchy
3. Test keyboard navigation
4. Fix UI inconsistencies

### Deliverable
- Compleet gestylde mini-project
- Alle shadcn/ui components correct geintegreerd
- Custom color theme
- GitHub commits met styling improvements

---

## Leerdoelen

Na deze les kan de student:
- Tailwind utility-first approach begrijpen en toepassen
- shadcn/ui components installeren en gebruiken
- Custom Tailwind themes maken
- Dark mode implementeren
- Responsive design (mobile-first) toepassen
- Professional-looking UI bouwen met componenten
- Het verschil tussen styling approaches begrijpen