Tailwind CSS v4 design decisions. Use when: Tailwind, utility-first, container query, design tokens, dark mode strategy.
From shipnpx claudepluginhub thkt/dotclaude --plugin toolkitThis skill is limited to using the following tools:
reference.mdProvides UI/UX resources: 50+ styles, color palettes, font pairings, guidelines, charts for web/mobile across React, Next.js, Vue, Svelte, Tailwind, React Native, Flutter. Aids planning, building, reviewing interfaces.
Fetches up-to-date documentation from Context7 for libraries and frameworks like React, Next.js, Prisma. Use for setup questions, API references, and code examples.
Calculates TAM/SAM/SOM using top-down, bottom-up, and value theory methodologies for market sizing, revenue estimation, and startup validation.
Design-level decisions that linters cannot catch.
| Topic | Key Point |
|---|---|
| Container Query | Reusable component → @container, page layout → viewport |
| Color Token | Primitive + Semantic minimum. Arbitrary values = missing token |
| Dark Mode | v4: @custom-variant in CSS, no darkMode config key |
| Layout Selection | flex (1-axis), grid (2D), grid+spans (Bento) |
| Component Extraction | Same class combo 3+ times → extract. No @apply in v4 |
| Anti-Patterns | No dynamic class strings, no !important, no arbitrary values |
| v4 CSS-First Config | @theme in CSS replaces tailwind.config.js |
→ Details: Container Query, Color Token, Dark Mode, Layout, Component Extraction, Anti-Patterns, v4 Config