1. 从 CSS Modules 迁移到 Tailwind CSS为什么需要 AI 编码工具统一 KeyCSS Modules 写久了最大的痛点不是样式本身而是命名。.headerWrapper、.headerWrapperInner、.headerWrapperInnerActive这种名字写的时候要想改的时候要搜删的时候还不敢删。Tailwind CSS 的原子化类名把这个问题从根上解决了但迁移过程有个现实矛盾老项目里几十上百个.module.css文件不可能一次性全改完新页面又想直接用 Tailwind两套体系并存期间怎么保证不打架、怎么让 AI 编码工具帮你批量生成类名映射这才是真正卡住大多数人的地方。我试过在一个中型 React 项目里做这件事项目里有 60 多个 CSS Modules 文件组件 200 多个。如果纯手工改一个组件平均 15 分钟光改样式就要 50 小时以上。后来用 AI 编码工具辅助把类名映射和组件改写建议交给模型生成人工只做审核和微调整体时间压到了原来的三分之一左右。但这里有个前提AI 编码工具必须能稳定调用Key 不能今天换一个明天换一个否则写到一半通道断了上下文全丢比手工还慢。这就是为什么这篇要先把 TaoToken 的统一 Key 配置讲清楚。TaoToken 是一个 API 通道聚合服务你可以把它理解成一个统一的入口把不同模型的调用收敛到一套 Base URL 和 Key 上。对于迁移这种需要反复调用补全、生成、改写建议的场景统一 Key 意味着你不用在多个配置文件之间来回切换settings.json 和 config.toml 里写一次后面所有 AI 辅助动作都走同一条通道。适合谁看手上有一个用 CSS Modules 的 React/Vue 项目想逐步切到 Tailwind CSS同时已经在用或准备用 AI 编码工具比如 Cline、Claude Code、Codex 这类来加速迁移的前端开发者。不需要你已经是 Tailwind 老手但至少要能跑通npm install和npm run build。迁移的整体思路分三步第一步把 Tailwind 装进项目并配置好让新旧样式能共存第二步把 AI 编码工具的 API 通道配好确保补全和生成能稳定调用第三步选一个组件做试点让 AI 生成类名映射人工审核后替换跑通构建再批量推进。下面按这个顺序展开每一步都给可复制的配置和验证动作。2. TaoToken 前置配置settings.json 与 config.toml 骨架在开始改样式之前先把 AI 编码工具的通道配好。这一步不做后面让 AI 生成类名映射的时候会频繁遇到 401 或者通道超时迁移节奏会被打断。TaoToken 的 API 地址是https://taotoken.net/api注意这个地址不带任何查询参数直接作为 Base URL 使用。官网入口是https://taotoken.net/?utm_sourcetaotoken_aicg_blog_end需要注册和拿 Key 的话从这里进。先说你最可能用到的两个配置文件。如果你用的是 VS Code 系的 AI 编码插件比如 Cline配置通常落在settings.json里如果你用的是 Claude Code 或 Codex 这类命令行工具配置一般在config.toml或auth.json里。下面给的是骨架路径和字段名按你实际用的工具对齐不要直接照抄字段名要看工具文档确认。先看settings.json的骨架适用于 Cline 这类插件{ cline.apiProvider: openai, cline.openAiBaseUrl: https://taotoken.net/api, cline.openAiApiKey: sk-你的TaoTokenKey, cline.openAiModelId: claude-sonnet-4-20250514, cline.enableAutoComplete: true }这里三个关键字段Base URL 填https://taotoken.net/apiKey 填你在 TaoToken 控制台生成的 KeyModel ID 填你要用的模型标识。Model ID 不要凭感觉写去 TaoToken 的模型列表里查一下当前可用的名称写错了会直接报 model not found。再看config.toml的骨架适用于 Claude Code 这类工具[api] base_url https://taotoken.net/api api_key sk-你的TaoTokenKey model claude-sonnet-4-20250514 timeout 60 [features] auto_complete true context_window 200000如果你用的是 Codex配置可能落在auth.json里结构类似{ base_url: https://taotoken.net/api, api_key: sk-你的TaoTokenKey, model: claude-sonnet-4-20250514 }三件套记住Base URL、Key、Model ID。这三个字段在任何 AI 编码工具里都是必须的缺一个都调不通。Base URL 统一用https://taotoken.net/api不要加斜杠结尾也不要加任何路径后缀。Key 从 TaoToken 控制台的 API Keys 页面生成生成后只显示一次记得存好。Model ID 根据你实际要用的模型填迁移场景建议用长上下文模型因为要一次性把整个组件的 CSS Modules 文件和 JSX 结构喂进去上下文不够会截断。配好之后不要急着改样式先做一次验证调用。打开你的 AI 编码工具在任意一个文件里触发一次补全比如输入const test 然后等补全建议。如果补全正常返回说明通道生效。如果报 401检查 Key 是否复制完整如果报 connection timeout检查 Base URL 是否写成了https://taotoken.net/api/带了多余斜杠如果报 model not found去 TaoToken 模型列表核对 Model ID。这一步的验证动作很关键因为后面批量迁移的时候AI 要反复读取 CSS Modules 文件、生成 Tailwind 类名、改写 JSX通道不稳定会直接导致迁移中断。先把通道跑通再动样式。3. Tailwind CSS 安装与共存配置tailwind.config.js 完整骨架通道配好之后回到项目本身。Tailwind CSS 的安装不复杂但和 CSS Modules 共存有几个坑必须提前处理否则会出现样式覆盖、preflight 冲突、行高异常这些问题。下面以 create-react-app 项目为例其他构建工具Vite、Next.js步骤类似只是入口文件路径不同。第一步安装依赖并生成配置文件npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p执行完会生成tailwind.config.js和postcss.config.js两个文件。postcss.config.js一般不用改保持默认即可。重点是tailwind.config.js下面给一份从 CSS Modules 迁移场景下可直接用的完整骨架/** type {import(tailwindcss).Config} */ module.exports { important: true, content: [./src/**/*.{ts,tsx,js,jsx}, ./src/**/*.{css,scss}], corePlugins: { preflight: false, }, theme: { extend: { fontSize: { xs: 12px, sm: 14px, base: 16px, lg: 18px, xl: 20px, 2xl: 24px, 3xl: 30px, 4xl: 36px, 5xl: 48px, 6xl: 60px, 7xl: 72px, }, textColor: { 666: #666666, }, backgroundColor: { 666: #666666, }, }, }, plugins: [], };逐项说明为什么这么配。important: true是为了让 Tailwind 的类名优先级最高因为老项目里 CSS Modules 的样式可能带各种选择器权重不加 important 会出现 Tailwind 类名写了但不生效的情况。content要同时匹配 JSX/TSX 和 CSS/SCSS 文件因为迁移期间两套样式并存Tailwind 需要扫描到所有可能用到类名的地方。corePlugins.preflight: false是必须的preflight 会重置浏览器默认样式而老项目通常已经有一套 normalize 或 reset两者叠加会导致按钮、列表、标题样式错乱。fontSize重写是为了去掉 Tailwind 默认的行高绑定默认的text-base会同时设置 font-size 和 line-height迁移时行高对不上会很难排查这里全部改成只设 font-size。textColor和backgroundColor里的666是示例把你项目里高频出现的自定义颜色加进来后面就能直接用text-666和bg-666。然后在入口 CSS 文件里引入 Tailwind 的三层指令。注意是入口 CSS 文件不是.module.css文件tailwind base; tailwind components; tailwind utilities; html { font-size: 16px; }html { font-size: 16px; }是为了处理 Tailwind 的 rem 单位问题。Tailwind 默认用 rem 做间距和尺寸如果 html 的 font-size 不是 16px所有尺寸都会偏移。显式设成 16px 可以保证w-4就是 16px和设计稿对齐。做完这些先别改任何组件找一个页面加一个测试元素div classNameflex items-center justify-center bg-666 text-white p-4 通道测试 /div跑npm start如果看到居中的灰色背景块说明 Tailwind 已经生效。如果没生效检查入口 CSS 是否被正确引入以及content路径是否匹配到了这个文件。这一步跑通之后新旧样式共存的基础就打好了接下来可以让 AI 介入做类名映射。4. 用 AI 生成类名映射并完成单组件替换验证基础配置跑通后选一个结构简单但样式有代表性的组件做试点。不要一上来就挑最复杂的先拿一个只有 3 到 5 个类名的组件练手把流程跑顺。假设你有一个Button.module.css.primary { background-color: #1677ff; color: #ffffff; padding: 8px 16px; border-radius: 4px; font-size: 14px; } .secondary { background-color: #f5f5f5; color: #666666; padding: 8px 16px; border-radius: 4px; font-size: 14px; }对应的组件import styles from ./Button.module.css; export function Button({ variant primary, children }) { return ( button className{styles[variant]} {children} /button ); }现在让 AI 编码工具生成 Tailwind 类名映射。在编辑器里选中这个 CSS 文件和 JSX 文件触发 AI 补全或对话提示词可以这样写把下面的 CSS Modules 类名映射成 Tailwind CSS 类名输出格式为 原类名 - Tailwind 类名列表 不要改 JSX只输出映射表。AI 返回的映射大概是这样.primary - bg-[#1677ff] text-white px-4 py-2 rounded text-sm .secondary - bg-[#f5f5f5] text-666 px-4 py-2 rounded text-sm拿到映射后人工审核一遍。重点看几个地方padding: 8px 16px对应px-4 py-2因为 Tailwind 的4是 16px2是 8px方向要对border-radius: 4px对应rounded默认就是 4pxfont-size: 14px对应text-sm因为前面重写了 fontSizesm就是 14px。审核没问题后改写组件const variantClass { primary: bg-[#1677ff] text-white px-4 py-2 rounded text-sm, secondary: bg-[#f5f5f5] text-666 px-4 py-2 rounded text-sm, }; export function Button({ variant primary, children }) { return ( button className{variantClass[variant]} {children} /button ); }改写完成后删掉Button.module.css的引用跑一次构建npm run build如果构建通过再跑npm start看页面样式是否和之前一致。这里有个细节如果原 CSS 里有:hover或:active状态Tailwind 对应的是hover:bg-[#0958d9]这种写法AI 生成映射时容易漏掉伪类需要人工补上。我踩过的坑就是 hover 状态没迁移上线后按钮悬停没反应排查了半天才发现是伪类丢了。单组件验证通过后就可以批量推进了。批量的时候不要一次性让 AI 改所有文件按目录分批每批 5 到 10 个组件改完跑一次构建确保没有回归。AI 生成的映射表可以存成 JSON后面写脚本批量替换的时候直接用。5. 迁移常见报错排查401、local proxy failed、reading choices迁移过程中最容易卡住的不是样式本身而是通道和配置报错。下面列几个高频错误和对应的排查动作都是实际迁移时真实遇到过的。401 Unauthorized这个最直接Key 不对或没带上。检查settings.json或config.toml里的api_key字段是否填了完整的 Key有没有多余空格。如果 Key 是从控制台复制的确认没有复制到换行符。另外检查 Base URL 是否写成了https://taotoken.net/api如果写成了https://taotoken.net少了/api也会 401。local proxy failed这个报错通常出现在插件尝试走本地代理但代理没启动的情况下。检查你的 AI 编码工具是否开启了本地代理模式如果开了但代理进程没跑就会报这个。解决办法是关掉本地代理选项直接用 Base URL 直连。在 Cline 的设置里找proxy相关字段清空或设为null。reading choices 报错这个一般出现在模型返回格式不符合预期的时候比如你用的 Model ID 对应的模型不支持当前插件的返回解析。检查 Model ID 是否和插件支持的模型列表匹配换一个兼容的模型试试。另外确认timeout设置不要太短迁移时上下文较长60 秒以上比较稳妥。OAuth 相关报错如果你用的是 Claude Code 或 Codex可能会遇到 OAuth token 过期或未授权。这类工具通常有自己的登录流程但如果你走的是 TaoToken 的 API Key 通道就不需要 OAuth直接在配置里填 Key 即可。如果工具强制走 OAuth检查是否有use_api_key之类的开关打开它。构建时报 Tailwind 类名不生效检查content路径是否匹配到了改写的文件。如果文件在src/pages下但content只写了./src/**/*.{ts,tsx}是能匹配到的但如果文件在src外面就匹配不到。另外检查入口 CSS 是否引入了tailwind utilities少了这行所有工具类都不会生成。样式覆盖导致老页面错乱如果发现迁移后老页面样式变了大概率是preflight没关。确认corePlugins.preflight设成了false。如果已经设了还是有问题检查是否有其他全局样式和 Tailwind 的 base 层冲突可以把tailwind base暂时去掉只保留components和utilities试试。排查的时候按顺序来先确认通道通不通触发一次补全再确认 Tailwind 生不生效加测试元素最后确认单个组件改写的类名对不对对比迁移前后截图。三步都过了再批量推进。6. 统一 Key 打通 AI 辅助迁移的后续动作单组件验证通过、报错排查清楚之后剩下的就是按批次推进。这里给一个可操作的节奏第一批 5 个组件第二批 10 个第三批开始按目录整批处理。每批改完跑一次npm run build构建通过再提交出问题可以快速回滚。AI 辅助迁移的核心价值在于类名映射的生成和 JSX 的批量改写但审核环节不能省。AI 生成的映射表里伪类、媒体查询、动态类名这三类最容易出错需要人工重点看。动态类名比如className{styles[type]}这种AI 可能会直接展开成多个静态类名但实际运行时type是变量需要保留条件逻辑改成className{type primary ? ... : ...}的形式。通道方面TaoToken 的统一 Key 在迁移期间不用换Base URL 固定https://taotoken.net/apiModel ID 根据任务类型选生成映射表用长上下文模型批量改写用速度快一点的模型。需要看模型列表和生成 Key 的话从 API Keys 页面进想先试一下模型对话效果可以从模型对话入口进如果迁移周期比较长考虑用 Coding Plan 把调用额度固定下来避免中途断档。接入文档里有各工具的详细配置示例配settings.json或config.toml的时候对照着看比凭记忆写靠谱。最后提醒一点迁移不是一次性全量替换而是新旧共存、逐步推进。CSS Modules 文件不用急着删等对应组件稳定运行一段时间后再清理。这样即使某个组件迁移后出问题也能快速切回旧样式不会影响线上。