shadcn-tailwind

shadcn Tailwind Implementation Patterns

Use this skill when the UI stack is React or Next.js with shadcn/ui and Tailwind CSS. Reuse the general react or react-nextjs skill for application logic and use this skill for component styling, primitives, variants, and utility hygiene.

When to Use

• Building or modifying UI with shadcn/ui components and Radix primitives
• Styling components with Tailwind CSS utility classes in a React or Next.js project
• Creating component variants, extending shadcn primitives, or composing design system elements
• Reviewing Tailwind class hygiene, responsive behavior, or design token consistency

When NOT to Use

• Task is about React logic, hooks, or state without styling specifics — use react
• Task is about Vue/Nuxt with Vuetify or PrimeVue — use vuetify-primevue
• Task is about visual design decisions (color palette, typography scale, animation craft) — use ui-design-quality alongside this skill

Delivery Workflow

Use the checklist below and track progress:

shadcn Tailwind progress:
- [ ] Step 1: Discover existing UI primitives, tokens, and utility conventions
- [ ] Step 2: Reuse or extend existing shadcn/ui components
- [ ] Step 3: Implement variants and layout with disciplined Tailwind usage
- [ ] Step 4: Verify accessibility and responsive behavior
- [ ] Step 5: Review class hygiene, consistency, and reuse

Component Reuse Rules

• Reuse existing shadcn/ui primitives before creating new wrappers.
• Keep wrappers thin and capability-focused; do not create parallel component libraries casually.
• Extend components through variants and composition rather than copy-pasting markup.
• Preserve the expected API shape of shared primitives unless a project-wide migration is intended.

Tailwind Utility Discipline

• Prefer readable class grouping over long unstructured class strings.
• Keep layout, spacing, typography, and state styles intentional.
• Reuse the project's utility helpers such as cn or equivalent merge helpers when available.
• Avoid one-off arbitrary values unless the design system genuinely needs them.
• Map recurring visual patterns into shared components or variants instead of repeating the same utility bundles.