用途:tailwind-to-cva 面向大型 React + TypeScript + Tailwind 代码库的结构化迁移,目标是用 CVA 驱动的变体契约和规范化的 ui/ 组件替代内联或重复的工具类逻辑。它不是视觉重设计工具。
主要能力:制定按功能/模块划分的迁移计划;为变体与包装组件定义明确的组件契约;按批次增量实现;每批执行硬性验证门禁;同时输出迁移报告。
使用方式:每次运行必须先选定迁移风格模式。consistent(推荐)允许为减少变体与工具类覆盖而出现轻微视觉/布局差异;precise 要求精确保留现有样式与布局,未经批准不得有视觉漂移。随后按流程执行:建立基线清单与批次范围、盘点并映射热点、定义目标组件契约、实现迁移、运行验证门禁、签核并进入下一批,直至清单清空。变体逻辑必须写入 cva 定义,组合时使用 cn();变体命名应表达意图(如 danger、ghost、size=large),而非颜色标签;深色模式规则应放在变体分支内。验证会运行 scripts/check-styles.mjs,并要求类型检查、测试、lint 通过。
适用场景:清理内联或重复的 Tailwind 类逻辑、把功能代码中的原始组件归一化为 ui/ 包装、带严格一致性规则的增量迁移、迁移中执行样式卫生检查。
限制:不适用于视觉重设计、令牌/主题重定义、大范围 UX 改动或无严格约束的探索性清理。除非另行明确说明,需保留行为;必须按功能/模块增量迁移,功能代码须消费已存在的 ui/ 包装组件;不得把原始组件包导入功能代码;不得跳过模式选择或静默推断模式。其他具体命令与配置细节暂未提供。