novi-lessons/Samenvattingen/Les10-Samenvatting.md

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