117 lines
3.2 KiB
Markdown
117 lines
3.2 KiB
Markdown
# 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
|