# Tailwind CSS + daisyUI

## Version and integration

- Tailwind CSS 4 via the `@tailwindcss/vite` plugin. Configuration is CSS-first.
- Global theming and daisyUI plugin setup live in `src/app.css` — read it for the current theme names and page background setup. It is the source of truth for theme configuration.
- `tailwind.config.ts` only defines content globs. Do not add JS theme tokens there; use CSS-first `@theme` in `src/app.css` instead.

## Style rules

- Prefer Tailwind utilities and daisyUI component classes (e.g. `btn`, `card`, `badge`) and their theme colors over hand-written CSS.
- Avoid arbitrary values (`[ ... ]`) when a core utility exists.
- Add new design tokens via `@theme` in `src/app.css`, not in `tailwind.config.ts`.
- Put page/component styling in `src/routes/**` components with utilities; keep global styles in `src/app.css`.
- Static assets referenced by URL (e.g. `/background.jpg`) live in `static/`.

## Verification

- After styling changes, run `pnpm check` (Svelte typecheck) and `pnpm build`.
- Class ordering is handled by `prettier-plugin-tailwindcss` — run `pnpm format` rather than reordering classes by hand.