中括号语法 text-[#1e3a8a] 是 tailwind 任意值唯一合法写法，须紧贴前缀、禁空格连字符，仅对已声明前缀（如 text-、bg-）生效，且需规避 purgecss 误删与 @apply 兼容性问题。
Arbitrary Values 的中括号语法怎么写才有效
中括号语法 [value] 是 Tailwind 实现任意值的唯一合法方式，不是写成 {value} 或 (value)。它必须紧贴类名前缀，中间不能有空格或连字符干扰。比如 text-[#1e3a8a] 有效，但 text-[#1e3a8a]（带连字符）或 text-[#1e3a8a ]（结尾空格）都会被忽略。
常见错误是把任意值当成“万能补丁”乱用：比如写 bg-[url('/img/hero.jpg')] 看似合理，但实际会失败——因为 url() 不是纯 CSS 值，Tailwind 预设的 bg- 类不支持解析函数式内容，必须改用 bg-[url('/img/hero.jpg')] 并确保已启用 content 相关 purge 配置，否则可能被误删。
- 只对 Tailwind 已声明的前缀（如
text-、bg-、px-、grid-cols-）生效 - 中括号内需为合法 CSS 值：颜色、长度、数字、字符串（加引号）、CSS 函数（如
calc()） - 避免嵌套括号：不支持
shadow-[0_0_10px_rgba(0,0,0,0.2)]这种写法；应写成shadow-[0_0_10px_rgba(0,0,0,0.2)]（注意括号已转义为下划线）或改用双引号包裹：shadow-["0_0_10px_rgba(0,0,0,0.2)"]
哪些属性支持 Arbitrary Values，哪些不支持
Tailwind 默认只对部分工具类前缀开放中括号语法，比如 text-、bg-、border-、gap-、grid-cols-、flex- 等。但像 animate-、transition-、ease- 这类依赖预设值的类，直接写 animate-[bounce_1s_ease-in] 会无效——它们不走 arbitrary value 解析路径，而是匹配 theme.animation 配置项。
是否支持，最准的判断方式是查官方文档对应工具类页的 “Arbitrary values” 小节，或看 tailwind.config.js 中 theme.* 是否定义了该前缀的扩展能力。例如 font-size 支持 text-[1.875rem]，但 line-height 对应的 leading- 前缀默认不支持任意值，除非你手动在 theme.extend.leading 中添加。
- 支持：所有尺寸类（
px-、max-w-）、颜色类（text-、bg-）、栅格列数（grid-cols-）、透明度（opacity-） - 不支持：动画名称（
animate-）、过渡属性（transition-）、字体族（font-，除非配置了theme.extend.fontFamily） - 有条件支持：阴影（
shadow-）、变换（scale-、rotate-），需确保值格式合规（如rotate-[15deg]可，rotate-[15]不可）
使用中括号语法时 PurgeCSS 容易误删
当你在模板里写 text-[#3b82f6]，而这个颜色没出现在 theme.colors 配置里，PurgeCSS 在构建时可能判定它为“未使用类”而删除——尤其在 content 路径未覆盖到 JSX/TSX 文件，或使用了动态拼接类名（如 className={`text-[${color}]`}）时更危险。
解决方法不是关掉 Purge，而是显式告诉 Tailwind：“这些模式我要保留”。在 tailwind.config.js 的 content 数组后追加 safelist：
module.exports = {
content: ["./src/**/*.{js,jsx,ts,tsx}"],
safelist: [
/text-\[#.*\]/,
/bg-\[#.*\]/,
/p[x|y|t|b]-\[.*\]/,
],
}
正则要足够窄，避免过度保留；/text-\[#.*\]/ 比 /\[.*\]/ 更安全。另外，如果任意值来自变量且无法静态分析（如用户输入的颜色），建议改用内联 style，而不是硬塞进 class。
和 @apply 配合使用时的限制
@apply 不能直接调用中括号语法，比如 @apply text-[#1e3a8a] bg-[#f9fafb]; 在较新版本（v3.3+）已支持，但旧版或某些 PostCSS 配置下仍会报错“unknown word”。更稳妥的方式是把任意值抽成自定义工具类，在 theme.extend 中注册：
module.exports = {
theme: {
extend: {
colors: {
'brand-blue': '#1e3a8a',
'brand-bg': '#f9fafb',
}
}
}
}
然后用 text-brand-blue 和 bg-brand-bg。这样既保持可维护性，又绕开 @apply 对 arbitrary value 的兼容性波动。
真正需要中括号的场景，其实是那些一次性、不可复用、且值无法提前枚举的样式——比如 CMS 导入的 hex 颜色、实时计算的宽度百分比、第三方组件透传的 style 字符串。这时候才值得承担解析和 purge 的额外成本。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
