方括号语法仅对bg-、text-、mt-、w-、grid-cols-、shadow-、duration-等白名单前缀生效；rounded-、border-、flex-、place-items-等不支持任意值，且格式须零容错，空格或非法字符将导致静默失效。
方括号语法不是万能补丁，它只在特定条件下生效；写错一个空格、用错一个前缀、或试图套在不支持的属性上，样式就会静默失效——而且 DevTools 里根本找不到对应规则。
哪些类名前缀支持 [value] 语法？
不是所有工具类都能加方括号。Tailwind 只对明确列入白名单的前缀启用 JIT 解析，比如 bg-、text-、mt-、w-、grid-cols-、shadow-、duration-。但以下常见情况不支持：
-
rounded-[12px]❌ ——rounded-不进任意值管道，得改用[border-radius:12px] -
border-[2px_solid_#ccc]❌ ——border-默认只支持颜色，宽度/样式需手动配置或改用[border:2px_solid_#ccc] -
flex-[1_0_auto]❌ ——flex-不支持任意值，应写[flex:1_0_auto] -
place-items-[center]❌ —— 多级预设类不开放，直接用[place-items:center]
[value] 写法必须零容错
JIT 引擎对格式极其敏感，任何多余空格、非法字符都会导致整条规则被跳过：
-
mt-[24px]✅ 紧贴、无空格、单位显式 -
mt- [24px]❌ 前缀后有空格 → 失效 -
mt-[ 24px ]❌ 括号内有空格 → 失效 -
text-[1.2em]⚠️ 部分版本不支持，优先用text-[1.2]（Tailwind 自动补单位） -
shadow-[inset_0_2px_4px_rgba(0,0,0,0.1)]✅ 下划线替代空格，括号保留 -
shadow-[inset 0 2px 4px rgba(0,0,0,0.1)]❌ 括号内含空格 → 解析失败
想用 CSS 变量？别直接 text-[var(--primary)]
Tailwind 对 var(--x) 只做字符串透传，不校验变量是否存在或是否合法。结果常是“编译成功、渲染失败”：
- 变量名拼错（如
--primaray）→ 浏览器回退为initial，文字变透明或黑色 -
bg-[rgb(var(--bg))]要求--bg是数字三元组（如--bg: 59, 130, 246），写成#3b82f6或rgb(...)都会解析为rgb(NaN) -
hover:bg-[var(--hover-bg)]可能被同级bg-blue-500覆盖，因 specificity 更低 - 真正可靠的做法：在
tailwind.config.js的theme.extend.colors中注入变量，再用bg-primary/80这类标准写法
动态拼接类名（如 className={`text-[${size}px]`}）永远无效
JIT 编译阶段无法运行 JS 表达式，PurgeCSS 也不会扫描字符串拼接。这类写法在构建后直接消失：
- ❌
className={`mt-[${offset}px]`} - ❌
className={\`bg-[${color}]\`} - ✅ 正确路径：若需复用，定义
@layer utilities类；若来自 CMS 或用户输入，且值不可枚举，才考虑bg-[{{ $userColor }}]（服务端模板）或[background-color:var(--dynamic-bg)]（配合 JS 设置 CSS 变量） - ⚠️ 注意：
@apply bg-[#fff]在@layer里也会报错 —— Tailwind 明确禁止在@apply中嵌套 arbitrary values
最常被忽略的一点：方括号语法只是“逃生舱”，不是设计起点。一旦发现你在多个地方重复写 text-[#1e40af]、mt-[3.75rem]、shadow-[...]，就该停下手，去 tailwind.config.js 扩展 theme 或定义 @layer utilities —— 否则项目越往后，CSS 体积越大，维护成本越高，响应式和 hover 变体也全丢了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
