Skip to content

Conversation

ronjalh
Copy link
Member

@ronjalh ronjalh commented Oct 16, 2026

Summary

Sets up Tailwind CSS 4 in the frontend, on its own. No page uses Tailwind classes yet: this is the setup, so the interface issues (#40–#48) can use utility classes, and the shadcn/ui setup (#51) can build on it.

What is in it

  • tailwindcss and @tailwindcss/vite under devDependencies, because they are only needed to build.
  • The Vite plugin in vite.config.ts, and @import 'tailwindcss'; at the top of src/index.css, with a comment about the cascade.
  • No tailwind.config.js: Tailwind 4 is configured in CSS with @theme.
  • A "Tailwind CSS" section in the README: why, how it is set up, browser support, and how it works together with our own CSS.
  • An entry in docs/AI_USAGE.md.

Things to know

  • Our own CSS wins over utility classes. Tailwind 4 puts its styles in CSS layers, and unlayered CSS beats layered CSS whatever the specificity. A plain rule in src/index.css or src/App.css overrides a utility class on the same element. This is explained in the README.
  • Browsers. Tailwind 4 is made for Chrome 111, Safari 16.4 and Firefox 128 or newer. Older browsers are not supported.
  • Preflight (Tailwind's reset of margins, heading sizes and buttons) is included. Our own CSS is unlayered, so it still wins where it sets the same property, and the starter page should look the same.
  • Design tokens in src/styles/variables.css (PR 27 set up css variables #35, on main only) are not connected to Tailwind. That is a design decision for later.

Testing

  • I used a temporary component with p-4 bg-red-500 and built: the used classes are in the built CSS, and an unused class (m-37) is not. The temporary file is not in the PR.
  • npm run lint, npm run build, npm test and npm run typecheck -w backend pass, and the dev server starts and serves the compiled CSS.
  • The lock file only adds packages: 31 new, all build-only, none removed and no version changed.

Overlap with #53

#53 (shadcn/ui and Lucide) also sets up Tailwind in vite.config.ts, src/index.css, package.json and the lock file. When this PR is merged, #53 needs to be updated to build on it (and then only adds shadcn/ui, Lucide, the @/ alias and the lint exception).

Closes #54

🤖 Generated with Claude Code

tailwindcss and @tailwindcss/vite are build tools. The README explains the browser support and that our own unlayered CSS wins over utility classes.
@ronjalh ronjalh requested a review from a team as a code owner October 16, 2026 08:04
@ronjalh ronjalh self-assigned this Oct 16, 2026
@ronjalh
Copy link
Member Author

ronjalh commented Oct 16, 2026

Merged into #53, which now contains the Tailwind setup together with shadcn/ui and Lucide (one change, as they touch the same files).

@ronjalh ronjalh closed this Oct 16, 2026
@ronjalh ronjalh deleted the 54-set-up-tailwind-css branch October 16, 2026 08:17
Sign in to join this conversation on GitHub.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant