方括号语法必须紧贴前缀且无空格，如mt-[24px]合法，mt- [24px]或mt-[ 24px ]无效；单位须显式写出，仅部分属性支持无单位缩写；斜杠、括号等特殊字符需url编码或改用函数式写法；calc表达式内需保留空格；仅bg-、text-、mt-、w-、grid-cols-等指定前缀支持任意值，rounded-等不支持；动态拼接类名因jit无法静态分析而失效，应优先用css变量替代。
方括号语法写错一个空格就无效
Tailwind 的 [ ] 任意值必须紧贴前缀，中间不能有空格或非法字符。比如 mt-[24px] 合法，mt- [24px]（带空格）或 mt-[ 24px ]（括号内带空格）都会被 JIT 引擎忽略，最终不生成对应 CSS 规则。
常见错误现象：样式没生效，DevTools 里查不到该类的声明，也不报错——这是最坑的地方。
- 所有单位必须显式写出：
w-[200px]✅，w-[200]❌（除非用w-[200]这种无单位缩写，但仅限部分属性如flex、z-index） - 斜杠
/、括号( )、引号等需 URL 编码或改用函数式写法：bg-[url('%2Fimg.png')]或bg-[url('/img.png')]（新版 JIT 支持后者，但旧版 PostCSS 可能崩） - calc 表达式要加空格：
h-[calc(100%-48px)]✅，h-[calc(100%-48px)]（少空格）在某些版本里会解析失败
哪些类名支持方括号语法
不是所有工具类都能套 [ ]。Tailwind 明确只对特定前缀开放任意值支持，比如 bg-、text-、mt-、w-、grid-cols-、duration- 等；但像 rounded-、shadow- 这类带多级预设值的，rounded-[12px] 是无效的（得用 rounded-[12px] ❌ → 应改用 rounded-[12px]？不对——实际是 rounded-[12px] 不被识别，必须走 rounded-[12px]？等等，查实：Tailwind 官方文档明确 rounded- 不支持任意值，要用就得写 [border-radius:12px]）。
真正安全的支持列表看这里（JIT 模式下）：
- 尺寸类：
w-、h-、min-w-、max-h-、inset- - 间距类：
m-、p-、mt-、pl-等全部方向前缀 - 颜色类：
bg-、text-、border-、fill-、stroke- - 网格布局：
grid-cols-、grid-rows-、gap-（注意：grid-template-columns类属性需用grid-cols-[...]形式） - 其他：
font-size-（已废弃）、应直接用text-[14px]；duration-、opacity-、z-
自定义值含 CSS 函数或变量怎么写
方括号里可以写函数和 CSS 变量，但要注意语法容错边界。比如 bg-[linear-gradient(to_right,#ff0000,#00ff00)] 合法，但括号嵌套多层时容易出错；color:var(--primary) 要写成 text-[var(--primary)]，不能漏掉 text- 前缀。
-
bg-[url('/assets/logo.svg')]✅（路径中无空格/特殊字符） -
bg-[url('../images/bg\ with\ space.jpg')]❌ → 改用 URL 编码：bg-[url('%2Fimages%2Fbg%20with%20space.jpg')] -
top-[calc(100%-var(--header-height))]✅，但需确保 CSS 变量已在 :root 或父级定义 -
grid-cols-[200px,repeat(auto-fit,minmax(240px,1fr))),300px]✅，注意逗号分隔、无引号
为什么有些任意值编译后没生成 CSS
最常被忽略的是 JIT 的白名单机制和 PurgeCSS 清理逻辑：即使语法全对，如果该类名没在 content 配置指定的文件路径中「字面量出现」，它就不会进最终 CSS。比如你在 JS 里拼接字符串 className={`mt-[${offset}px]`}，Tailwind 默认无法静态分析，结果就是没生成。
- 动态场景（Svelte/React/Vue 中插值）优先用
[margin-top:var(--offset)]+ CSS 变量传值，而不是依赖mt-[${x}px] - 大量重复色值如
bg-[#f1f2f3]多次出现，会导致 CSS 体积膨胀，不如在tailwind.config.js的theme.extend.colors里注册一个gray-50 - 旧项目升级到 v3.4+ 后，
text-[1.2em]可能失效，改用text-[1.2]（Tailwind 自动补rem）或显式写text-[1.2em]并确认已启用experimental.optimizeUniversalDefaults
方括号语法看着自由，但每一处生效都依赖 JIT 的静态扫描能力——它不执行 JS，只认 HTML 字符串里的原样文本。这点比手写 CSS 更苛刻，也更需要你控制“哪里该用、哪里该收口”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
