tailwind v3.0+ 支持类名末尾加 !（如 p-4!）生成 !important 规则，兼容响应式变体；前置或嵌套写法无效；全局 important: true 会为所有工具类添加 !important，慎用；[&]:w-[80px] 等属性选择器可提升特异性且不破坏变量继承。
直接在工具类名末尾加 ! 就能生成带 !important 的 CSS 规则，这是 Tailwind v3.0+ 原生支持的语法，无需配置、不依赖构建插件，也完全兼容响应式变体（如 md:p-4!）。
用 p-4! 而不是 !p-4 或 sm:!p-4
Tailwind 只识别后置 !，即写在类名**末尾**。前置或嵌套位置均无效：
-
!p-4→ 编译失败或被忽略（不是合法类名） -
sm:!p-4→ 无法解析，应写作sm:p-4! -
p-4\!→ 现代构建工具（Vite、Webpack 5+）已自动转义，手动加反斜杠仅在报Unclosed bracket错误时才需
important: true 是全局开关，但慎用
它会让所有工具类（text-red-500、flex、hidden 等）都带上 !important，适合与 Bootstrap、Element Plus 等重度侵入式 UI 库共存的救火场景：
- 必须写成布尔值
important: true，写成字符串"true"无效 - 开启后，
twMerge对外部类（如el-button）的压制能力失效，因对方也可能带!important - 后续若想用 CSS 变量控制透明度（如
--tw-bg-opacity），!important可能阻断变量继承链
比 ! 更精准的替代方案：[&]:w-[80px]
当需要覆盖的是任意值类（如 w-[80px]）或响应式任意值类（如 md:w-[120px]）时，! 会失效（md:!w-[120px] 不被支持），而 [&] 可提升特异性且完全兼容：
-
w-[80px]特异性为 0,1,0；[&]:w-[80px]编译为.w-\[80px\] [&]:w-\[80px\]，特异性升至 0,2,0 - 支持响应式：
[&]:md:w-[120px]→.w-\[80px\] [&]:md:w-\[120px\] - 不破坏变量继承，也不禁用响应式逻辑，比暴力
!更轻量可维护
真正容易被忽略的是：! 解决的是“谁权重高”，但很多样式不生效其实源于 @layer 顺序错乱、preflight 重置干扰，或构建缓存导致工具类定义顺序异常——这些地方加再多 ! 都没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
