用途:该技能提供在 React 组件中使用 Tailwind CSS 的编码模式,触发条件为在 React 组件中使用 Tailwind CSS 时。
主要能力与用法:
- 类名合并:使用 clsx 与 tailwind-merge 组合出 cn() 工具函数,用于合并类名。示例导入为 import { clsx } from 'clsx'; import { twMerge } from 'tailwind-merge';,并定义 cn(...inputs) 返回 twMerge(clsx(inputs))。
- 组件变体:使用 class-variance-authority 的 cva 与 VariantProps 管理变体,定义如 buttonVariants 的变体配置,含 variant(primary、secondary、ghost)与 size(sm、md、lg)及 defaultVariants,并通过 buttonVariants({ variant, size }) 应用。
- 决策树:需要动态类名时用 clsx/cn;需要变体时用 CVA;需要条件类名时用 clsx 配合条件;需要覆盖样式时用 tailwind-merge。
- 条件类名示例:在 className 中通过 cn() 组合基础类名、isActive 三元条件与 disabled 条件类名。
适用场景:在 React 项目中搭配 Tailwind CSS 编写可维护的组件样式时。
限制:资料未提供安装命令、版本要求、完整 API 文档或对框架环境的更多说明。