feat: set up Tailwind CSS

README.md

@@ -66,6 +66,7 @@ In the repository now:
 - A seed script that loads the catalog from `data/` into the database
 - ESLint and Prettier for linting and formatting, for both the frontend and the backend
 - Vitest for testing
+- Tailwind CSS 4 for styling, see [Tailwind CSS](#tailwind-css)
 
 Planned:
 
@@ -88,6 +89,29 @@ We also considered MongoDB and SQLite:
 
 The ordered list of elements in a routine is stored as a join table with a position column, which keeps the foreign keys. How each list in the data model is stored is described in "Storage in PostgreSQL" in [docs/DATA_MODEL.md](docs/DATA_MODEL.md#storage-in-postgresql).
 
+### Tailwind CSS
+
+The interface is styled with [Tailwind CSS](https://tailwindcss.com) 4: small utility classes written in the markup (`className="p-4 text-center"`), instead of one CSS rule for each component.
+
+**Why**
+
+- **Small CSS.** Only the classes that the code uses end up in the built CSS. We checked it: a class that is used is in the built file, and a class that is not used is not.
+- **One scale** for spacing, sizes and colours, instead of values written by hand in every component.
+- **shadcn/ui** (planned in #51) is built on Tailwind.
+
+**How it is set up**
+
+- `tailwindcss` and `@tailwindcss/vite` are in `devDependencies`, because they are only needed to build.
+- The Vite plugin is in `vite.config.ts`, and `src/index.css` starts with `@import 'tailwindcss';`.
+- There is no `tailwind.config.js`. Tailwind 4 is configured in CSS, with [`@theme`](https://tailwindcss.com/docs/theme).
+
+**Things to know**
+
+- **Browsers.** Tailwind 4 is made for Chrome 111, Safari 16.4 and Firefox 128 or newer. Older browsers are not supported.
+- **Our own CSS wins over utility classes.** Tailwind puts its styles in CSS layers, and CSS that is not in a layer beats CSS that is, whatever the specificity. A rule in `src/index.css` or `src/App.css` therefore overrides a utility class on the same element. If a class seems to have no effect, look for a plain CSS rule for the same property. New styles should be written as utility classes, or inside `@layer`.
+- **Preflight.** Tailwind's base styles reset margins, heading sizes and buttons. Our own CSS is not in a layer, so it still wins where it sets the same property.
+- **Design tokens.** The tokens in `src/styles/variables.css` (PR #35) are not connected to Tailwind yet. Connecting them with `@theme` is a design decision for later.
+
 ## Getting started
 
 > The frontend in `src/` is still the Vite starter project, so `npm run dev` only shows the starter page. To work on the backend, also follow "Database (local setup)" below.

docs/AI_USAGE.md

@@ -145,3 +145,15 @@
   the checks on a local database: two runs in a row with no changes, the row
   counts against the JSON files, broken copies of the data, the soft delete
   and clean-up, and that user data is untouched.
+
+## Tailwind CSS (`vite.config.ts`, `src/index.css`, README)
+
+- **Tool:** Claude Code
+- **What the team did:** Decided to use Tailwind CSS and to set it up on its
+  own, before shadcn/ui, and wrote issue #54 with the decisions and the
+  checks. The team reviews the choices.
+- **What Claude did:** Installed Tailwind 4 with the Vite plugin, checked in a
+  build that a used class ends up in the CSS and an unused class does not,
+  checked the browser support and the cascade layers in the Tailwind
+  documentation, and wrote the README section. Claude checked lint, build and
+  tests.