tailwind类名优先级由css声明顺序和选择器权重共同决定，而非html中class字符串顺序；所有工具类特异性相同（0,1,0），生效取决于构建时css输出顺序，故需用twmerge语义合并、prefix隔离、preflight关闭三者协同解决。
Tailwind 类名优先级问题不是“谁写在后面谁赢”，而是 CSS 声明顺序和选择器权重共同决定的；直接靠调整 class 属性里的字符串顺序无法稳定控制生效结果。
为什么 class="text-red-500 text-blue-500" 不保证蓝色生效
Tailwind 所有工具类（如 text-red-500、text-blue-500）都是单类选择器，特异性完全相同（0,1,0）。最终哪个生效，取决于它们在生成的 CSS 文件中谁定义得更靠后——而不是你在 HTML 里怎么排列。
- Vite/HMR 缓存、PostCSS 插件顺序微调、甚至 Node 版本差异，都可能改变构建时工具类的输出顺序
-
text-blue-500在默认配色中生成位置靠后，所以它“赢”了；但如果你自定义了text-red-500并放在theme.extend.colors末尾，它就可能反超 - Vue 的
:class数组拼接、JS 动态拼字符串，无法保证最终 CSS 声明顺序，纯属碰运气
用 twMerge 替代堆叠类名
它不是排序器，而是语义合并器：识别同一属性组（text-、bg-、p-）内的冲突，只保留最右边那个有效值，其余自动剔除。
- 必须传入字符串：
twMerge('tw-p-2 tw-p-4')✅，twMerge(['tw-p-2', 'tw-p-4'])❌（原样返回数组） - 非 Tailwind 类（如
my-btn）会被完整保留，不参与合并 - 变体支持完整：
twMerge('hover:tw-p-2 hover:tw-p-4')→'hover:tw-p-4' - 搭配
clsx更自然：twMerge(clsx('tw-p-4', isOpen && 'tw-p-2'))
什么时候该加 ! 或改 important 配置
! 是唯一能绕过 CSS 层叠规则的 Tailwind 原生手段，但它只解决“被内联样式或第三方 !important 锁死”的场景，不用于两个 Tailwind 类之间抢优先级。
- 正确写法只有
p-4!、md:p-4!；!p-4和sm:!p-4完全无效 -
important: true在tailwind.config.js中启用后，所有工具类自动带!important，体积增大，且后续!text-sm会失效（变成非法语法） - 更可控的是
important: '#app'，只影响根容器内样式，避免波及弹窗、Tooltip 等浮动元素 - 别对
@layer base（preflight）规则用!——它作用于标签选择器，button { background: transparent !important }这种写法本身就不该存在
真正要动手改的三个地方
单独改任何一项都治标不治本。三者必须同时落地：
-
prefix: 'tw-'：在tailwind.config.js顶层加，确保所有生成类名隔离；HTML/JSX 中每个 Tailwind 类都得手动补前缀，漏一处就失效 -
corePlugins.preflight: false：关掉@tailwind base重置，否则button透明、img变块级等问题照旧；改完必须重启开发服务器，HMR 不触发重建 -
twMerge输入必须全是带前缀的类：twMerge('tw-p-4', 'p-2')不会警告，但p-2不被识别，等于白用
最容易被忽略的是：HTML 里每个类名都要手动加 tw-，preflight: false 改完不重启服务，twMerge 输入混进一个无前缀类——这三件事只要出一件，整个优先级体系就崩了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
