Tailwind仅对text-、bg-、mt-、w-、grid-cols-、shadow-、duration-等明确声明的前缀支持[value]语法；rounded-、border-、animate-、transition-等不支持，需用原生CSS写法。
text-、bg-、mt- 这些前缀才支持 [value] 语法
不是所有类名都能套方括号。Tailwind 只对明确声明的工具类前缀启用任意值解析，比如 text-、bg-、mt-、w-、grid-cols-、shadow-、duration-。像 rounded-、border-、animate- 这类不走 JIT 任意值管道，写 rounded-[12px] 或 animate-[bounce] 直接无效。
最稳妥的判断方式：查官方文档对应工具类页的 “Arbitrary values” 小节；或者确认该前缀是否在 tailwind.config.js 的 theme.* 中有定义（例如 theme.extend.spacing 影响 mt- 类）。
-
bg-[#1e3a8a]✅ 支持 -
text-[var(--primary)]✅ 语法合法（但不会动态解析变量） -
rounded-[12px]❌ 不支持，得用[border-radius:12px] -
transition-[all]❌ 不支持，transition-是预设枚举类
[value] 写错一个空格就彻底失效
Tailwind JIT 引擎对语法极其敏感：[ 必须紧贴前缀，] 后不能跟空格，括号内也不能有首尾空格。写成 mt- [24px]、mt-[ 24px ]、text-[ #333 ] 全部被静默忽略——DevTools 里找不到规则，也不报错，这是最常踩的坑。
- ✅ 正确：
text-[#333]、shadow-[0_2px_4px_rgba(0,0,0,0.1)]、grid-cols-[1fr,2fr,1fr] - ❌ 错误：
text-[ #333 ]（括号内空格）、max-w-[50%]（v3.0+ 默认禁用百分比，需显式开启） - ⚠️ 特殊字符要处理：
bg-[url('/img.png')]比bg-[url(/img.png)]更稳；含空格或括号时优先用下划线替代，如rotate-[15deg]而非rotate-[15 deg]
复杂值如 box-shadow 或 linear-gradient 怎么写
多重 box-shadow 必须用英文逗号分隔，且括号内不能有空格——JIT 不做清洗，只按字面解析。同理，linear-gradient 中的括号和逗号也必须合规，否则整个类被丢弃。
- ✅ 正确：
shadow-[inset_0_0_0_1px_red,inset_0_0_0_2px_blue] - ✅ 正确：
bg-[linear-gradient(to_right,_#ff0000,_#00ff00)]（逗号和空格都转成下划线） - ❌ 失效：
shadow-[inset 0 0 0 1px red, inset 0 0 0 2px blue]（括号内含空格） - ❌ 失效：
bg-[linear-gradient(to right, #ff0000, #00ff00)]（原始空格未转义）
注意：calc() 表达式里保留空格是安全的，如 h-[calc(100%-48px)]，但旧版 PostCSS 可能要求写成 h-[calc(100%-48px)]（少空格），建议统一加空格并升级依赖。
CSS 变量和 var(--x) 在任意值里怎么用
text-[var(--primary)] 这种写法语法上合法，但 Tailwind 不会运行时解析它——生成的 CSS 就是 color: var(--primary);，没毛病，但也不会为你生成 text-primary/20 这类变体。真正的问题在于：如果你指望它配合暗色模式或主题切换自动生效，那就得靠 JS 控制根元素样式，而不是靠 Tailwind 配置。
- ✅ 安全做法：固定值直接进
tailwind.config.js的theme.extend.colors，比如brand: '#1677FF'，之后text-brand全链路可用 - ✅ 动态场景：放弃配置，改用
@layer utilities封装，例如@utility text-var { @apply text-[var(--text-color)]; } - ❌ 禁止在
theme里写var(--x)：构建时报Cannot read property 'r' of undefined，因为 Tailwind 静态分析失败
真正难搞的不是怎么写，而是哪些地方看似能用、实则被 PurgeCSS 删掉——比如模板里只出现一次的 text-[#f1f2f3]，若没出现在 content 配置路径里，编译后就没了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
