Tailwind的class按HTML中出现顺序覆盖，非CSS权重；同类属性重复书写仅最后一个生效；响应式类须遵循移动优先顺序；语义化配置颜色与间距更安全；混用Bootstrap需加前缀、设important并禁用preflight。
class顺序错了，样式就白改了
Tailwind的class不是靠CSS权重叠加，而是按HTML里出现的顺序逐个应用，后面的覆盖前面的。比如text-red-400 text-blue-500 hover:text-gray-800 hover:text-yellow-500，最终hover状态是黄色——但你本意可能是灰色。
表单类尤其敏感：border border-gray-300 invalid:border-red-500 focus:border-blue-500必须把border写在最前；如果border放最后，所有状态都会被重置成灰色边框。
- 避免同类属性重复写，比如
flex flex-col flex-row，只有flex-row生效，flex-col纯属冗余且容易误判 - 响应式类要严格按“基础 → 断点变更”顺序：用
flex flex-col md:flex-row，别写sm:flex-col md:flex-row lg:flex-col——移动优先下，没变的断点不用声明
别直接硬套旧数值，语义化才是关键
把margin-top: 13px改成mt-13看着省事，但Tailwind默认不生成mt-13，得手动加进theme.spacing，否则编译体积暴涨；同理，background: #3b82f6写成bg-[#3b82f6]会让换主题变成全文本搜索替换。
正确做法是收口到语义键：
- 间距统一走系统值：
space-y-4控制子项垂直间隙，比mt-4更安全 - 颜色定义在
tailwind.config.js里：primary: { 500: '#3b82f6' }，后续只需改配置，不用动HTML - 禁用
mt-3.5、mb-13这类非标值，除非已明确配进theme.spacing
混用Bootstrap和Tailwind必须加前缀+important
直接并存.hidden、.text-center、.container会冲突，浏览器只认谁的规则更靠后、选择器更具体——这不是可控行为。
三步实操必须同步做：
- 在
tailwind.config.js中启用prefix: 'tw-'，所有工具类自动变成tw-flex、tw-p-4 - 同时设
important: true（布尔值，不是字符串），让这些带前缀的类自带!important，压制Bootstrap同权重规则 - 关掉
preflight：corePlugins: { preflight: false }，否则Tailwind重置button等原生标签样式，按钮可能变透明
注意：HTML里所有class都得手动加tw-，漏一个就丢样式；@apply和@layer不受前缀影响，只作用于生成的工具类。
Bootstrap只留结构，Tailwind管样式
Bootstrap的utilities模块（含.d-flex、.text-center）和Tailwind功能高度重叠，必须禁用，否则就是冲突源。
SCSS导入时只保留基础层：
@import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; @import "bootstrap/scss/mixins"; @import "bootstrap/scss/root"; @import "bootstrap/scss/reboot"; @import "bootstrap/scss/type"; @import "bootstrap/scss/grid";
网格结构可以继续用Bootstrap的.row、.col，但样式类全交给Tailwind——别在一个元素上同时写row tw-grid，这种混合不是配置能兜住的，得靠人工约定。
重构最难的不是写class，是把旧项目里“哪段HTML对应哪块交互逻辑”理清楚；类名改完，JS绑定的class也可能失效，这点最容易被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
