styling-with-tailwind-shadcnlisted

# Styling with Tailwind CSS v4 & Shadcn UI This skill provides **implementation patterns** for the Calm Tech design system using Tailwind CSS v4 (CSS-first configuration) and shadcn/ui (new-york style) on Radix primitives. **For design thinking (what/why)**: Use the `designing-frontend` skill. All tokens and utilities live in `apps/client/src/index.css` (there is no `tailwind.config.js` and no `globals.css` — this is a Vite SPA, not Next.js). ## Current Documentation (Context7) Tailwind v4 uses CSS-first configuration. For current patterns: ``` # Check installed version grep '"tailwindcss"' apps/client/package.json # Fetch Tailwind v4 docs mcp__context7__resolve-library-id: { libraryName: "tailwindcss" } mcp__context7__query-docs: { context7CompatibleLibraryID: "[resolved-id]", topic: "[specific topic, e.g., '@theme directive', 'dark mode', 'custom utilities']" } # Fetch Shadcn docs mcp__context7__resolve-library-id: { libraryName: "shadcn" } mcp__context7__query-docs: { context7CompatibleLibraryID: "[resolved-id]", topic: "[component name, e.g., 'Button', 'Form', 'Dialog']" } ``` **When to fetch docs:** - Uncertain about Tailwind v4 CSS-first syntax - Adding new shadcn components - Implementing theming or dark mode - Understanding Radix primitive behavior ## When to Use - Writing Tailwind classes for components - Implementing dark mode theming - Using the `cn()` utility for conditional classes - Customizing Shadcn UI components - Adding animations with Mo