方括号语法[value]是Tailwind的“逃生舱”，仅对bg-、text-、mt-、w-、grid-cols-、shadow-等明确支持任意值的工具类生效，需满足JIT启用、属性未禁用、语法严格合规（如无空格、特殊字符转义）三大条件。

Tailwind CSS 的方括号语法 [value] 不是“任意值映射样式”的万能开关，它只在特定条件下生效——必须是已注册的自定义属性（CSS custom property）或已启用的“任意值”功能（JIT 模式下对部分工具类的扩展支持），否则会直接被忽略或报错。

哪些工具类真正支持 [value] 语法？

不是所有 Tailwind 工具类都认方括号。只有明确声明了 arbitraryValues: true（v3.3+ 默认开启）且底层使用了 css.escape() 安全处理的工具类才支持。典型包括：

• text-[#ff6b6b]、bg-[#1e40af] —— 颜色类支持十六进制、RGB、HSL 字符串
• top-[23px]、w-[12.5rem]、flex-[0_0_250px] —— 尺寸/布局类支持带单位的数值或 CSS 函数
• shadow-[0_4px_12px_rgba(0,0,0,0.15)] —— 阴影类支持完整 box-shadow 值
• grid-cols-[repeat(7,minmax(0,1fr))] —— 网格类支持内联 grid-template-columns 值

但像 font-[Inter] 或 z-[9999] 这类不会生效：前者需通过 @layer fonts 注册字体族，后者 z-index 类默认只接受预设层级（z-0 到 z-50），z-[9999] 在未配置 extend.zIndex 时会被丢弃。

为什么 [value] 有时不生成 CSS？

常见静默失败原因：

立即学习“前端免费学习笔记（深入）”；

• 值中含未转义的空格或括号，如 bg-[linear-gradient(to right, red, blue)] ❌ → 正确写法是 bg-[linear-gradient(to_right,_red,_blue)]（用下划线代替空格，逗号后加下划线）
• 使用了 Tailwind 未识别的单位，如 h-[10vh] ✅ 支持，但 h-[10q] ❌（q 单位未内置白名单）
• 在非 JIT 模式（旧版或禁用 content 扫描）下，[...] 不会被解析，需确保 tailwind.config.js 启用了 content 路径扫描
• CSS 自定义属性未在 :root 中定义，却写了 text-[var(--my-color)] —— Tailwind 不校验变量是否存在，只原样输出，若变量未定义则无效果

如何安全地用 [value] 引入 CSS 变量？

直接写 bg-[var(--primary)] 是可行的，但更健壮的做法是绑定到已注册的 theme slot，避免拼写错误和缺失 fallback：

module.exports = {
  theme: {
    extend: {
      backgroundColor: {
        primary: 'var(--primary, #3b82f6)',
      }
    }
  }
}

这样既能用 bg-primary 保证类型安全，又能在需要动态值时写 bg-[var(--primary)]。注意：var(--primary) 中的括号不能省略，也不能写成 var(--primary, —— 逗号后必须有空格和 fallback 值，否则 CSS 解析失败。

方括号语法本质是 Tailwind 的“逃生舱口”，它不校验语义、不提供补全、不保证兼容性。真正容易被忽略的是：它的输出完全依赖你写的字符串是否符合 CSS 规范，而 Tailwind 不做二次修正。写错一个空格，就等于写了一行无效 CSS。