Set up Tailwind CSS

[ronjalh]

Done in #53. The Tailwind setup was merged into the shadcn/ui and Lucide PR (#53), because both change the same files (vite.config.ts, src/index.css, package.json and the lock file). #53 closes this issue and is part of #51.

Set up Tailwind CSS 4 in the frontend, so the interface issues (#40–#48) can use utility classes. The shadcn/ui setup (#51) builds on it.

Why

• Small CSS. Tailwind only generates the classes that the code uses, so unused styles do not end up in the bundle. This helps the green web requirement.
• Consistent spacing, sizes and colours through one scale, instead of values written by hand in every component.
• shadcn/ui needs it. The Tailwind setup and the component setup (Set up Tailwind CSS, shadcn/ui and Lucide icons #51) were done in one PR (feat: set up Tailwind CSS, shadcn/ui and Lucide icons #53), because they touch the same files.

Decisions

• Version and plugin. Tailwind CSS 4 with the Vite plugin (@tailwindcss/vite). There is no tailwind.config.js: Tailwind 4 is configured in CSS with @theme.
• Build tools. tailwindcss and @tailwindcss/vite go under devDependencies, because they are only needed to build.
• Browser support. Tailwind 4 is made for Chrome 111, Safari 16.4 and Firefox 128 or newer. Older browsers are not supported. Check this against our accessibility and audience requirements.
• Existing CSS. Tailwind 4 puts its styles in CSS layers. Our own unlayered CSS (for example in src/index.css) wins over Tailwind's utility classes, whatever the specificity. This must be known by everyone who writes CSS in the project.
• Design tokens. The tokens in src/styles/variables.css (PR 27 set up css variables #35, only on main so far) are not connected to Tailwind in this issue. Connecting them with @theme is a design decision for a follow-up.

Done when:

• tailwindcss and @tailwindcss/vite are installed under devDependencies
• The Vite plugin is added to vite.config.ts, and src/index.css imports Tailwind
• A utility class used in the code ends up in the built CSS, and an unused class does not
• npm run lint, npm run build and npm test pass, and the dev server starts
• The README explains how Tailwind is set up, the browser support, and how it works together with our own CSS
• docs/AI_USAGE.md has an entry

Not part of this issue

• shadcn/ui and Lucide (Set up Tailwind CSS, shadcn/ui and Lucide icons #51), which are in the same PR (feat: set up Tailwind CSS, shadcn/ui and Lucide icons #53) but are described in that issue
• Connecting the design tokens to @theme
• Prettier and ESLint plugins for Tailwind classes