feat: set up Tailwind CSS, shadcn/ui and Lucide icons

[ronjalh]

Summary

Sets up Tailwind CSS 4, shadcn/ui and Lucide icons, so the interface issues (#40–#48) can be built on the same components and icons from the start. It is initialisation only: no page uses the components yet. It also contains what was in the separate Tailwind PR (#55, closed), so Tailwind and shadcn/ui are one change.

What is in it

• Tailwind CSS 4 with the Vite plugin, and the @/ alias (@/ means src/). The alias uses paths only, because TypeScript 6 deprecates baseUrl, which the shadcn/ui guide still tells us to add.
• shadcn/ui: components.json, the cn helper in src/lib/utils.ts, and one component (src/components/ui/button.tsx).
• Lucide (lucide-react). The README shows how to import an icon and how to label an icon-only button for screen readers.
• Tailwind notes in the README: the browser support (Chrome 111, Safari 16.4, Firefox 128), that our own unlayered CSS wins over utility classes, and what Preflight does.
• A test (button.test.tsx) that renders a Button with an icon. It shows that the alias, the component and the icon work together, and needs no browser environment.
• ESLint: the Fast Refresh rule is off for src/components/ui/, because the generated components also export helpers such as buttonVariants.
• README has a new section: why, how to add a component, the choices below, and what is still to do. docs/AI_USAGE.md has an entry.

Choices (from #51)

Question	Choice	Why
Style and primitives	base-nova on Base UI	The default of the current CLI. Base UI handles keyboard use, focus and ARIA. Radix is the older alternative.
Class-name helper	cn package	What the CLI sets up. The classic alternative is clsx + tailwind-merge.
Font	System fonts	The CLI added the Geist font (about 60 kB of font files). Removed, for the green web requirement.
Dark mode	data-theme="dark"	Matches src/styles/variables.css, and not a .dark class.
Build tools	devDependencies	The CLI put shadcn, tailwindcss and the others under dependencies. They are only needed to build, so only 16 packages are needed in production (the lock file grows by about 300 packages, all from these tools).

What this does to the page

• Size: no change in JavaScript (224 kB, 70 kB gzip), because no component is used yet and unused code is removed. The CSS is 27 kB (6 kB gzip).
• Tailwind's base styles (Preflight) reset margins, heading sizes and buttons on the whole page. The Vite starter page will look a little different.
• Starter tokens: --border and --accent exist in both the Vite starter styles and shadcn/ui. The CLI changed them in place, so shadcn/ui's values win. The starter styles go when the real page is built.

Base branch

This PR is on top of dev. src/styles/variables.css (PR #35) is only on main so far, so the README and a comment in src/index.css mention a file that dev does not have yet. It arrives when main and dev are brought together.

Not done (still open in #51)

• Colours are not connected. shadcn/ui uses its own tokens (--background, --foreground, --primary …). Our tokens in src/styles/variables.css are separate. Connecting them is a design decision, and there are two things to look at first:
  • --background-color is declared twice in variables.css. The second value (#BDE981, the D-value green) wins and becomes the page background.
  • The [data-theme="dark"] block is nested inside :root { … }, so it matches a descendant of the root and not the page itself. Dark mode does not apply as written.
• The people who build Create Search page header #40–Add element variants list to element page #48 need to know it is ready.

Testing

A temporary component with p-4 bg-red-500 showed that used Tailwind classes are in the built CSS and an unused class (m-37) is not. The file is not in the PR.

npm run lint, npm run build (including tsc -b), npm test and npm run typecheck -w backend pass, and the dev server starts. The lock file only adds packages: none removed and no version changed.

Part of #51
Closes #54

🤖 Generated with Claude Code

[anettkva]

nice!