Tailwind CSS 中如何正确使用带任意值的类？

你提到的浏览器无法识别特殊字符的问题不需要担心，这套语法是Tailwind JIT模式内置的专属语法，编译阶段会自动处理成浏览器可识别的标准CSS，不会直接把带特殊符号的类名丢给浏览器解析。

前置要求 #

• 确保使用Tailwind v3.0及以上版本，该版本起默认开启JIT模式，无需额外配置即可使用任意值类
• 任意值类必须完整书写，不可动态拼接生成，比如不能写bg-[${动态色值}]，必须直接写出完整的bg-[#1da1f1]，否则Tailwind编译时无法识别到对应类，不会生成相关CSS规则

生效原理 #

你写的bg-[#1da1f1]经过Tailwind编译后，会自动转义特殊字符，生成如下标准CSS：

.bg-\[\#1da1f1\] {
  background-color: #1da1f1;
}

转义后的类名完全符合W3C标准，浏览器可以正常识别使用。

常见使用场景示例 #

• 自定义颜色：bg-[#1da1f1]、text-[rgb(255,97,0)]、border-[hsl(212,97%,54%)]
• 自定义尺寸：w-[237px]、h-[13.5rem]、p-[21px]
• 自定义计算规则：top-[calc(100%-2rem)]、grid-cols-[repeat(4,minmax(0,150px))]

内容的提问来源于stack exchange，提问作者stckvrw