# Tailwind Setup Skill (Vite + shadcn/ui)

Add Tailwind CSS, shadcn/ui, dark-mode theme tokens, and aliases to a React/Vite frontend that talks to a Django backend.

## What This Skill Does
- Installs Tailwind (+ Vite plugin) and core shadcn/ui deps (`class-variance-authority`, `clsx`, `tailwind-merge`, `lucide-react`).
- Updates `vite.config.js` to run `tailwindcss()` alongside React and adds `@` alias → `./src`.
- Replaces `src/index.css` with Tailwind entry, then appends theme tokens via `scripts/apply-theme.sh` (uses `assets/tailwind-theme.css`) for dark/light palettes.
- Sets up shadcn/ui scaffolding: `components.json`, `jsconfig.json` aliases, and utility `src/lib/utils.js`.
- Enables class-based dark mode in `tailwind.config.js`.
- Adds `ThemeContext` & `ThemeToggle` components and wraps `App` with `ThemeProvider`.
- Installs shadcn/ui components (card, field, input, button, table, navigation-menu, label, separator, alert) via CLI.
- Verifies build with `npm --prefix ./frontend run build`.

## Prerequisites
- React + Vite frontend in `frontend/`.
- Django backend already set up (used only for proxy alignment).
- Node.js 18+ and npm; mkcert HTTPS recommended.

## Setup Summary (see SKILL.md for exact edits)
1) **Deps**: `npm --prefix ./frontend install tailwindcss @tailwindcss/vite class-variance-authority clsx tailwind-merge lucide-react`.
2) **Vite config**: import `path`, `tailwindcss`; add plugin; add `resolve.alias` `{ '@': path.resolve(__dirname, './src') }`.
3) **CSS entry**: set `src/index.css` to `@import "tailwindcss";`.
4) **Theme tokens**: run `bash .claude/skills/tailwind-setup/scripts/apply-theme.sh frontend` (appends tokens to `src/index.css`).
5) **shadcn scaffolding**: create `components.json`, `jsconfig.json`, `src/lib/utils.js`.
6) **Tailwind config**: `darkMode: 'class'`, content globs for `./index.html` and `./src/**/*.{js,jsx}`.
7) **ThemeProvider + toggle**: add `src/contexts/ThemeContext.jsx`, `src/components/ThemeToggle.jsx`; wrap `<Router />` in `App.jsx`; drop toggle into navbar.
8) **shadcn components**: run `npx --prefix ./frontend shadcn@latest add ...` for card/field/input/button/table/navigation-menu/label/separator/alert.
9) **Build check**: `npm --prefix ./frontend run build`.

## Outputs/Artifacts
- Tailwind + shadcn tokens in `src/index.css`.
- `tailwind.config.js`, `components.json`, `jsconfig.json`, `src/lib/utils.js`.
- Theme context/toggle components added and App wrapped.
- Installed shadcn/ui primitives ready for use.

## Notes & Gotchas
- Run theme script from project root and pass `frontend` path arg.
- Ensure Vite aliases in `vite.config.js` and `jsconfig.json` match.
- If you already have CSS content, back it up before replacing with Tailwind import (tokens are appended by the script).
- Add additional content globs to `tailwind.config.js` if you place components elsewhere.