Tailwind的CSS顺序影响样式覆盖是因为其按预设优先级而非HTML中class书写顺序输出，需通过CSSnano的reorder（启用layer:true）安全重排，禁用mergeLonghand等破坏原子性的优化。
为什么Tailwind生成的CSS顺序会影响样式覆盖？
Tailwind默认按工具类定义顺序输出CSS，比如 text-red-500 总在 text-blue-500 前面，但实际项目中你可能先写 text-blue-500 再覆盖为 text-red-500，结果因源码顺序固定反而失效。这不是bug，是设计使然——Tailwind不保证“后写的class一定生效”，它只保证“所有class按预设优先级排列”。真正起作用的是CSS特异性（specificity）和源码顺序的叠加效果。
重排CSS本身不能改变特异性，但能确保同类工具类（如所有 text-*）按语义层级或使用频次聚类，减少意外覆盖。
CSSnano的restructure和reorder到底该开哪个？
CSSnano v5+ 中，restructure 会合并重复规则、移除无用声明；reorder 才负责调整规则块顺序。Tailwind用户真正需要的是后者，但必须配合正确配置，否则可能把 @layer utilities 里的内容错位。
-
reorder默认只对普通选择器生效，对@layer块内的规则无效——Tailwind大量使用@layer utilities，所以必须显式启用reorder: { layer: true } - 开启
reorder后，CSSnano会尝试按选择器权重（如 class 数量、属性名）分组排序，但不会打乱@layer base/components/utilities的大块边界 - 别开
mergeLonghand或mergeRules，它们可能把margin-top和margin-left合成margin，破坏Tailwind原子类的可预测性
PostCSS配置里怎么安全启用CSSnano重排？
直接在 postcss.config.js 中配 cssnano 插件时，必须锁定版本（v5.1.14+），并禁用冲突优化：
立即学习“前端免费学习笔记（深入）”；
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
cssnano: {
preset: ['default', {
// 关键：启用 layer 支持
reorder: { layer: true },
// 关键：禁用会破坏原子性的合并
mergeLonghand: false,
mergeRules: false,
// 可选：保留 !important，避免覆盖逻辑错乱
discardImportant: false,
}],
},
},
}
如果用 Vite 或 Next.js，注意它们可能自带 CSS 压缩，要确认是否已加载 cssnano —— 重复压缩会导致 reorder 失效或报错 Cannot read property 'length' of undefined（常见于未识别 @layer）。
重排后如何验证顺序是否真的变了？
别只看文件体积变化。打开构建后的CSS文件，搜索几个高频工具类，比如：
- 查
.text-xs、.text-sm、.text-base是否按字体尺寸从小到大连续出现（这是重排生效的信号） - 查
.bg-red-500和.bg-blue-500是否归在同一段，而不是被.flex或.p-4隔开 - 对比重排前后，运行
grep -n '\.text-' dist/output.css | head -10，看行号是否明显更紧凑
真正难处理的是自定义插件引入的 @layer components 规则——它们不会被 reorder 移动到 utilities 块里，但内部顺序可以优化。这点容易被忽略，结果以为没生效，其实是预期如此。
