Tailwind CSS

When to Use

shadcn/ui is the primary component framework. This skill covers the Tailwind CSS utility system that powers shadcn components — use it for layout, responsive design, spacing, theming, and custom styling beyond what shadcn provides out of the box.

Use this skill for:

• Page layout (flex, grid, positioning, spacing)
• Responsive design (breakpoints, container queries)
• Theming and design tokens (@theme directive, CSS variables)
• Customizing shadcn/ui components with utility overrides
• Animation and transitions
• State-based styling (hover, focus, disabled)

Defer to the shadcn-ui skill for: component selection, composition patterns (Dialog, Sheet, Command), form integration (react-hook-form + zod), and accessibility.

Setup (v4)