tailwindcss-advanced-components
Master advanced Tailwind component architecture using class-variance-authority for variant management, compound patterns for complex states, and utility helpers like cn for safe class composition. Learn context-based component systems, data-attribute styling, and polymorphic design patterns used in production design systems.
Tailwind CSS Advanced Components teaches you to build scalable, reusable component variants with CVA and compound patterns.
AI-generated summary based on this skill's SKILL.md
Install
JosiahSiegel/claude-plugin-marketplace/tailwindcss-advanced-components · repository language: Shell
git clone https://github.com/JosiahSiegel/claude-plugin-marketplace
cp -r claude-plugin-marketplace/plugins/tailwindcss-master/skills/tailwindcss-advanced-components ~/.claude/skills/tailwindcss-advanced-componentsnpx skillfed install JosiahSiegel/claude-plugin-marketplace/tailwindcss-advanced-componentsFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
What is class variance authority setup and how does tailwindcss-advanced-components use it?
tailwindcss-advanced-components teaches CVA (class-variance-authority) as the foundation for building reusable component variants. CVA lets you define variants as first-class objects, mapping props to Tailwind classes with type safety. The skill shows how to structure base styles, variants, and compound variants so components scale without conditional class strings, making your component library predictable and maintainable.
How do you build polymorphic components with type safety in tailwindcss-advanced-components?
tailwindcss-advanced-components covers polymorphic components using the `as` prop pattern, allowing a single component to render as different HTML elements while preserving TypeScript types. You learn to combine this with slot-based composition, where child elements are passed as props rather than direct children, enabling flexible layouts while maintaining strict prop validation and autocomplete support.
What does tailwind merge safe class composition mean for component design?
tailwindcss-advanced-components explains that the `cn` utility (built on tailwind-merge) safely merges conflicting Tailwind classes, preventing specificity bugs. When combining base component styles with user-provided className props, cn intelligently removes duplicates and conflicting utilities, ensuring the last declaration wins. This pattern is essential for extensible components that accept custom styling without breaking.
How does tailwindcss-advanced-components handle styling headless UI and Radix UI?
tailwindcss-advanced-components demonstrates styling headless primitives by leveraging data attributes and compound selectors. Radix and headless UI expose state via data-* attributes (e.g., data-state, data-disabled); you apply Tailwind classes using attribute selectors and group/peer patterns to style child elements based on parent state, creating fully styled accessible components without touching component internals.
What are group and peer patterns in tailwindcss-advanced-components for state management?
tailwindcss-advanced-components teaches group and peer as Tailwind modifiers for styling elements based on sibling or parent state. The `group` modifier lets you style children when a parent has a certain state (e.g., group-hover); `peer` styles siblings based on another sibling's state. Combined with data attributes, these patterns enable complex interactive states without JavaScript-driven class toggling.
How do you create reusable component variants using CVA and compound variant patterns?
tailwindcss-advanced-components shows how CVA's compound variants let you combine multiple props to trigger specific style combinations. For example, a button with size and variant props can have special styling when both are set to certain values. You define these relationships declaratively in the CVA config, avoiding nested conditionals and making component behavior explicit and testable across your design system.
SKILL.md
rendered from the published skill — quoted content, verbatim
Tailwind CSS Advanced Component Patterns
Component Variants with CVA
Class Variance Authority Integration
npm install class-variance-authority
```typescript // components/Button.tsx import { cva, type VariantProps } from 'class-variance-authority'; import { cn } from '@/lib/utils';
const buttonVariants = cva( // Base styles 'inline-flex items-center justify-center rounded-lg font-medium transition-colors focus-visible:outline-none focus-visible:ring-2
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 1 file
plugins/tailwindcss-master/skills/tailwindcss-advanced-components/SKILL.md