gh-otoshek-claude-code-toolkit/skills/tailwind-setup

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.