TailwindCSS 路线 09：性能与迁移——CSS 体积、复用策略、从传统 CSS 平滑过渡

你写 Tailwind 写到一定程度，会遇到两个现实问题：

1. class 越来越多，复用策略不清晰
2. 老项目迁移成本很高，不敢动

这篇给你一套“精通级”的工程方法。

01 目标与验收#

目标：建立清晰的复用层级，并能在不推倒重来的情况下迁移老样式。

验收：

• 页面/组件新增样式不会导致全站风格漂移
• 复用点明确：什么时候抽组件、什么时候抽常量
• 迁移按页面/模块推进，能持续交付

02 复用层级（推荐）#

从低到高：

• Token（变量）：颜色/边框/底色/聚焦
• 页面模板：列表/详情/双栏
• 基础组件：Button / Input / Card / Modal
• 业务组件：比如 PostCard、SeriesPostList

不要跳级。否则你会在最难的位置抽象。

03 迁移策略：从“包围”开始#

如果老项目有一堆 CSS：

1. 先用 Tailwind 把新页面写出来（不要改老页面）
2. 抽基础组件，让新页面越来越多地复用它们
3. 再逐步把老页面替换成新组件（按页面迁移）

这样不会出现“大迁移停摆”。

04 小结#

精通 Tailwind 的标志不是你会多少类名，而是你能把它写成一套可维护的系统。最后一篇我们做毕业项目：把 Token、模板、组件、表单、排版、动效、A11y 全部串成一个可交付的小产品。