本技能介绍 Tailwind CSS 高级组件模式，核心是使用 class-variance-authority（CVA）进行组件变体管理，帮助开发者构建可复用、可组合的组件。资料开头标注为“Tailwind CSS Advanced Component Patterns”。
主要能力
一、使用 CVA 管理组件变体。安装方式为 npm install class-variance-authority。示例以 Button 组件演示：通过 cva() 定义基础样式与 variants（variant、size、fullWidth），并支持 compoundVariants 组合变体与 defaultVariants 默认值；配合 cn 工具函数与 VariantProps 类型，导出 Button 组件与 ButtonProps 接口。使用方式如 <Button>Default</Button>、<Button variant="secondary" size="lg">、<Button variant="destructive" fullWidth>、<Button variant="ghost" size="icon">。
二、复合组件模式（Compound Components）。以 Card 组件为例，使用 createContext 共享 variant 状态，并通过 forwardRef 定义 Card 及其子组件 CardHeader、CardTitle、CardDescription、CardContent、CardFooter，最后具名导出。使用示例展示了 <Card variant="elevated"> 内部组合标题、内容与页脚，并在页脚中放置两个不同变体的 Button。
三、data 属性变体。通过 @custom-variant 定义 data-state-open、data-state-closed、data-side-*、data-highlighted、data-disabled 等自定义变体；示例中的 DropdownContent 与 DropdownItem 使用 data-state、data-side、data-highlighted、data-disabled 控制动画与状态样式。
四、group 与 peer 模式。group 模式演示父元素 hover 影响子元素（图片缩放、遮罩淡入、内容位移动画），并支持命名 group（如 group/card、group/header）；peer 模式用于兄弟元素状态联动，示例包括浮动标签表单与基于 peer-invalid 的表单校验提示。
五、@apply 插槽模式。在 @layer components 中定义 dialog、dialog-overlay、dialog-content、dialog-header、dialog-title、dialog-description、dialog-footer、dialog-close 等可复用插槽类。
六、多态组件（as 属性）。通过 ElementType、ComponentPropsWithoutRef、PolymorphicComponentProps 等类型定义 Text 组件，支持 as、size、weight、color 等属性；使用示例包括 <Text>、<Text as="p">、<Text as="h1">、<Text as="a" href="/link">。
七、无头组件集成。分别演示 @headlessui/react 的 Dialog 与 Transition 组合实现 Modal（含背景遮罩与面板过渡），以及 @radix-ui/react-dropdown-menu 的 Dropdown 实现（Trigger、Portal、Content、Item、Separator，配合 data-[highlighted] 与 data-[side] 样式）。
八、动画模式。StaggeredList 通过 animationDelay 实现列表错峰入场；Skeleton 组件使用 animate-pulse 与背景色实现骨架屏加载效果。
适用场景
适用于使用 React 与 Tailwind CSS 构建组件库、设计系统或应用 UI 的场景，尤其是需要统一变体管理、状态样式（data 属性、group、peer）和无头组件（Headless UI、Radix UI）集成的项目。
限制
资料未说明具体运行环境版本要求、浏览器兼容性、性能表现或注意事项；有关收费、价格、平台等信息暂未提供。