20 lines
1.1 KiB
Markdown
20 lines
1.1 KiB
Markdown
# 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.
|