SuperAPI AI 工具集

antd-style-to-tailwind

前端与建站

查看项目

更新于 10-15 21:35

技能介绍

用途:把使用 antd-style(createStyles、useXxxStyles、cx())的组件样式迁移为 Tailwind CSS 工具类,并保持暗色模式支持。

主要能力:审计 styles.ts,区分组件独有与共享样式;用 cn() 替换 cx();将 CSS 属性、设计 token、硬编码十六进制颜色映射为 Tailwind 类;处理伪元素、子选择器、动画;把 antd 的 Flex、Space 等布局组件替换为 div + Tailwind;将 antd Button、Input 替换为 shadcn 对应组件;将 MagicScrollBar 替换为 shadcn ScrollArea;覆盖 antd 组件样式时使用 .magic-* 前缀与必要的 !important;为交互元素补齐 hover、active、focus、disabled 状态;为硬编码浅色补充 dark: 变体。

使用方式:迁移前先阅读目标组件、其 styles.ts、tailwind.config.js 与 src/index.css;删除仅本组件使用的样式前用 rg 检查引用;类名统一用 cn() 拼接,避免字符串加号连接;z-index 优先使用语义类如 z-tooltip、z-dropdown、z-dialog;token 优先映射到语义变量如 text-foreground、border-border、bg-fill;antd 内部类覆盖使用 .magic-* 而非 .ant-*。

适用场景:项目内已有 antd-style 组件需要迁移到 Tailwind,或新功能所在文件仍使用 createStyles 时。

限制:资料未提供安装命令、版本要求、收费信息与具体平台支持;迁移需结合项目实际配置,部分映射依赖项目自定义 token 与动画配置。