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. **For design thinking (what/why)**: Use the `designing-frontend` skill. ## Current Documentation (Context7) Tailwind v4 uses CSS-first configuration (no `tailwind.config.js`). For current patterns: ``` # Check installed version grep '"tailwindcss"' 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']" } # Fetch Base UI docs (for primitive behavior) mcp__context7__resolve-library-id: { libraryName: "base-ui react" } mcp__context7__query-docs: { context7CompatibleLibraryID: "/mui/base-ui", topic: "[component, e.g., 'button render prop', 'dialog composition']" } ``` **When to fetch docs:** - Uncertain about Tailwind v4 CSS-first syntax - Adding new Shadcn/basecn components - Implementing theming or dark mode - Understanding Base UI primitive behavior (render prop, useRender hook) ## When to Use - Writing Tailwind classes for components - Implementing da