tailwind 重构旧项目需避免简单替换 class，必须关注 class 应用顺序、响应式断点匹配、语义化间距与颜色配置、字体收口、css 体积控制及隐式样式约定。
直接上手 Tailwind 重构旧项目，不是把 class="btn btn-primary" 换成 class="bg-blue-500 text-white py-2 px-4 rounded" 就算完事——那样大概率会漏掉响应逻辑、状态覆盖顺序、间距语义，最后样式跑偏、调试两小时找不到原因。
class 顺序决定最终样式，不是 CSS 选择器权重
Tailwind 的 class 是按 HTML 中出现顺序逐个应用的，后面覆盖前面。这和传统 CSS 的层叠规则无关，纯看 class 在 class 属性里的位置。
- 错误写法：
class="text-red-400 text-blue-500 hover:text-gray-800 hover:text-yellow-500"→ 最终 hover 是黄色，但你本意可能是“hover 时变灰”，结果被后面的hover:text-yellow-500覆盖了 - 表单校验类必须放最后：
class="border border-gray-300 invalid:border-red-500 focus:border-blue-500"，如果border写在最后，所有状态都会被重置为灰色边框 - 避免同类属性重复：比如同时写
flex flex-col flex-row，flex-row必然生效，但flex-col完全冗余且易被忽略
响应式断点必须严格匹配配置，不能凭经验写
Tailwind 默认断点是 sm/md/lg/xl/2xl，且每个断点对应一个最小宽度（如 md:xxx 表示 ≥768px）。写反或套用 Bootstrap 思维（比如 hidden-xs）会导致桌面端元素消失、移动端布局错乱。
- 常见错误：
md:hidden lg:block写成lg:hidden md:block→ 实际是“≥1024px 隐藏，≥768px 显示”，结果 900px 屏幕显示，1200px 反而隐藏 - 检查项目
tailwind.config.js中的screens配置，别假设它和默认一致；自定义断点（如tablet: '640px'）后，必须用tablet:hidden，不能继续用md:hidden - 移动优先原则下，基础样式不加前缀，响应式类只在需要变更时添加，例如：
flex flex-col md:flex-row，而不是全写成sm:flex-col md:flex-row lg:flex-col
间距和颜色别硬套旧值，优先走语义化命名
旧项目常用 margin-top: 13px 或 background: #3b82f6，直接映射成 mt-13 或 bg-[#3b82f6] 看似省事，实则埋坑：前者导致编译体积暴涨（Tailwind 会打包所有 mt-* 变体），后者让换主题变成全文本搜索替换。
- 间距统一用系统值：
space-y-4控制子项垂直间隙，比mt-4更安全；避免手动写mt-3.5或mb-13，除非已明确配置进theme.spacing - 颜色优先走语义键：
bg-primary+ 在tailwind.config.js里定义primary: { 500: '#3b82f6' }，后续换色只需改配置，不用扫 HTML - 字体大小收口到四档：
text-sm/text-base/text-lg/text-xl，别引入text-[14px]这种像素级写法，否则行高、字重、响应行为全部脱节
先跑一遍 npx tailwindcss -o ./dist/tailwind.css --minify，再动手改
重构不是从 HTML 开始，而是从真实使用情况开始。Tailwind 默认会生成所有可能用到的 class，但旧项目实际只用了其中 20%。盲目照搬旧结构，反而会让 CSS 文件体积翻倍。
- 执行命令后，打开浏览器 DevTools → Elements → 查看最终渲染的
class列表，哪些类高频出现？哪些根本没用？ - 对照
tailwind.config.js的content字段，确保它正确扫描了所有模板文件（Vue/JSX/HTML 路径都要列全），否则purge会误删正在用的类 - 如果发现大量非标准值（如
mt-7、text-14px），先确认是否真有必要；若只是临时 hack，建议用@layer utilities单独封装，别污染全局配置
重构最耗时间的环节，往往不是写新 class，而是理清旧项目的隐式约定：某个 padding 其实承担了垂直居中功能，某个 z-index 值是为了压住第三方弹窗。这些细节不会出现在 class 名里，但会直接影响 Tailwind 下的等效实现——得一行行 inspect 计算后的样式，而不是只看 class 名。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
