Tailwind v3 方括号写法详解

Tailwind CSS v3 的方括号任意值语法看似灵活强大，实则暗藏诸多“失效陷阱”：它并非运行时动态生效，而是依赖 JIT 编译器在构建阶段静态扫描并生成 CSS 规则，因此任何空格、非法字符、动态字符串拼接（如 Vue/React 中的插值）都会导致规则缺失；同时，任意值类与内置类特异性相同，极易被后声明的类覆盖，需借助 `[&]` 提升优先级；此外，URL、渐变、CSS 函数等复杂值必须严格转义，而 CSS 变量只能通过 `var(--x)` 原生语法使用，无法在方括号内进行预处理器求值——真正想用好它，关键不是“怎么写”，而是理解 JIT 的工作边界，并学会验证编译输出、预设安全值或转向更可靠的 CSS 属性语法。

Tailwind CSS v3 默认支持任意值（Arbitrary Values），但不是“写了就生效”——它依赖 JIT 编译器在构建时识别并生成对应 CSS 规则。如果 text-[#1a2b3c] 没效果，大概率是语法、配置或构建时机出了问题，而不是功能没开。

方括号语法必须紧贴前缀，不能有空格或非法字符

任意值类名是严格字符串匹配的：JIT 引擎靠正则提取 [...] 内的内容，任何额外空格、换行、Unicode 零宽字符都会导致解析失败。

• ✅ 正确：text-[#1a2b3c]、mt-[3.75rem]、bg-[url('/img.png')]
• ❌ 错误：text-[ #1a2b3c ]（前后空格）、max-w-[50%]（v3.0+ 默认禁用百分比，需显式开启）、bg-[linear-gradient(to_right,#000,#fff)]（括号未 URL 编码，应写成 bg-[linear-gradient(to_right,_#000,_#fff)]）
• ⚠️ 注意：font-size 类如 text-[14px] 有效，但 text-[1.2em] 在部分版本不被识别，优先用 text-[1.2]（Tailwind 自动补单位）

动态拼接字符串（如 Vue/React 中用变量）不会触发 JIT 编译

Tailwind 的任意值必须在构建时静态存在，v-bind:class 或模板字面量里拼出来的 hue-rotate-[${h}deg] 不会被扫描到，最终编译结果里根本没有这条 CSS 规则。

• ❌ 不可行：class="w-[${width}px]"（Svelte/Vue/JSX 中的插值）
• ✅ 替代方案：预设常用值范围（如 w-[200px] w-[300px] w-[400px]），再用条件 class 切换；或改用 [width:var(--w)] + CSS 变量控制
• ? 进阶技巧：若真需运行时动态色值，用 [color:var(--primary)] 这类 CSS 属性语法（非任意值类），它不依赖 JIT，纯靠浏览器解析

任意值类和内置类优先级相同，容易被覆盖

w-full 和 w-[80px] 编译后都是单类选择器（specificity = 0,1,0），谁在 CSS 文件里位置靠后，谁就生效——而 Tailwind 默认按字母序输出，w-[80px] 很可能排在 w-full 前面，结果反而是 w-full 覆盖了它。

• ✅ 推荐解法：[&]:w-[80px] —— 它生成的选择器是 .w-full.w-\[80px\]（specificity = 0,2,0），稳赢
• ⚠️ 注意：[&] 不是嵌套，是父选择器自引用，完全兼容响应式，比如 [&]:md:w-[120px] 有效
• ❌ 避免滥用 !w-[80px]：它会禁用所有响应式变体（md:!w-[120px] 不生效）

CSS 变量、渐变、函数等特殊值要小心转义和版本兼容

任意值不经过 CSS 解析器，只是原样塞进属性值里，所以括号、斜杠、引号这些字符必须处理干净，否则 PostCSS 会报错或生成无效声明。

• ✅ 安全写法：bg-[url('/path/to/img.png')]、text-[var(--primary)]、aspect-[4/3]
• ❌ 高危写法：bg-[url(/img.png?x=1&y=2)]（& 需 URL 编码为 %26）、shadow-[0_4px_6px_rgba(0,0,0,0.1)]（括号需空格或编码）
• ? 验证方法：打开编译后的 CSS 文件，搜索 w-\[80px\] 或 text-\[#1a2b3c\]，看对应规则是否存在；不存在就是 JIT 没扫到

最常被忽略的一点：任意值类本身不支持 CSS 变量求值，text-[var(--color)] 是合法的，但 text-[#{$color}]（Sass 风格）完全无效；真正想用变量驱动样式，得走配置层 theme.extend.colors 或直接上 [color:var(--color)] 属性语法。

以上就是《Tailwind v3 方括号写法详解》的详细内容，更多关于的资料请关注golang学习网公众号！