类名后加!是最直接的强制优先级方式，如p-4!编译为.p-4\!{padding:1rem!important}，支持md:p-4!写法；错误用法包括!p-4、sm:!p-4及冗余p-4\!；[&]:w-[80px]可提升特异性且兼容响应式，比!更精准轻量。
类名后加!是最直接的强制优先级方式
只要在任意 Tailwind 工具类末尾加上 !，就能让该规则带 !important 生效，比如 p-4! 编译后是 .p-4\! { padding: 1rem !important; }。它仍走 Tailwind 的值映射和响应式逻辑，支持 md:p-4! 这类写法。
常见错误包括：!p-4（前置无效）sm:!p-4（嵌套变体不支持，应写 sm:p-4!）p-4\!（现代构建工具已自动转义，手动加反斜杠多数时候多余，仅在报 Unclosed bracket 时才需）
用 [&] 提升任意值类的特异性
当 w-[80px] 被 w-full 覆盖，或 text-[#3b82f6] 被 text-red-500 压制时，! 会禁用响应式变体（如 md:!w-[120px] 不生效），而 [&]:w-[80px] 是更精准的解法。
[&] 是 Tailwind 内置的“自身选择器”变体，它把规则包装成 .w-full [&]:w-[80px]，将特异性从 0,1,0 提升到 0,2,0，且完全兼容 [&]:md:w-[120px] 这类响应式写法。
适用场景：
多个同类工具类冲突（bg-red-500 bg-[#8b5cf6]）
任意值类与预设类共存（text-lg text-[1.375rem]）
第三方组件内联样式未覆盖时，比 ! 更轻量、可维护
全局 important 配置要分清用途
tailwind.config.js 中的 important 选项不是“开关”，而是两种策略：
important: true → 所有工具类都加 !important，适合重度混用 Bootstrap 或富文本编辑器等高权重样式的项目，但 CSS 体积明显增大，且后续无法对单个类取消 !
important: '#app' → 所有类前缀变为 #app .p-4，靠选择器层级提升优先级，比全局 !important 温和，但仍可能被 body #app .p-4 这类更具体的选择器覆盖
这两种配置都应在项目初始化阶段决定，日常开发中临时补救请优先用 p-4! 或 [&]:p-4，而不是改 config
@layer 是长期解决优先级混乱的底层手段
真正难的不是让某条样式赢，而是让整个样式体系有清晰的层叠秩序。Tailwind 的 @layer 指令必须严格按顺序书写：
@tailwind base 必须是文件第一行@layer base 必须紧随其后（否则自定义 h1 等会被重置规则覆盖）@layer components 和 @layer utilities 必须分别出现在对应 @tailwind 指令之前
手写裸 CSS（如 .title { color: #1e40af; }）默认落在未声明层级，会被 @layer utilities 压制；想让它生效，要么放进 @layer utilities，要么用更高层（如 @layer components）并配合足够具体的选择器（如 input[type="text"] 而非 input）
最容易被忽略的一点：所有这些技巧都在回答「谁赢」，但真正该先问的是「为什么输」——打开浏览器开发者工具的 Computed 面板，看哪条规则实际生效、被谁覆盖，再决定用 !、[&] 还是重构结构
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
