Tailwind CSS 预设的类名虽然非常多，但在实际开发中，我们经常会遇到无法使用预设类名来达到预期效果的场景，比如：
- 精确的像素：LOGO 宽度必须是 31px 。
- 指定的颜色：绿叶网的背景色是 #C4F8E5。
- 特殊的背景：使用指定的背景图片。
- ……
初学的小伙伴在面对这种情况，可能会想：“使用传统的 CSS 来编写，不就可以解决了？” 确实能解决，但既然我们已经学了 Tailwind CSS，最好的解决办法还是使用 Tailwind CSS 提供的任意值语法来实现。
Tailwind CSS 任意值语法
在 Tailwind CSS 中，我们可以使用方括号 “[]” 这种方式来定义任意值，这样就可以精确定义任何想要的样式了。
语法：
<div class="w-[31px]"></div>
<div class="bg-[#C4F8E5]"></div>
<div class="grid-cols-[1fr_500px_2fr]"></div>说明：
Tailwind CSS 任意值的语法非常简单，我们只需要在类名后面紧跟一对中括号 “[]”，然后将自定义值写在里面就可以了，比如：
- 尺寸：w-[31px]、h-[45vh]、p-[13px]。
- 颜色：bg-[#1db954]、text-[#333333]。
- 位置：top-[117px]、left-[15%]。
- 网格：grid-cols-[200px_1fr_200px]（注意多个值之间用下划线 _ 代替空格）。
实际上，只要是支持数值的属性（width、height、color、font-size 等），都可以使用这种方括号的语法。Tailwind CSS 在编译时会自动提取括号内的内容，然后生成对应的 CSS。
比如 <div class="w-[31px]"></div> 这一句代码，Tailwind CSS 最终会编译成下面代码。也就是类名为 “.w-\[31px\]”，然后该类名内部包含一个属性 “width: 31px;”。
.w-\[31px\] {
width: 31px;
}Tailwind CSS 任意值示例
接下来我们通过一个具体的例子，来讲解一下如何利用任意值来实现一个完全自定义样式的展示卡片。
示例 1：使用 Tailwind 任意值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body class="bg-white flex items-center justify-center min-h-screen">
<div class="w-[400px] bg-[#F6FFFD] rounded-2xl shadow-lg overflow-hidden">
<div class="h-[120px] bg-[#71D696]"></div>
<div class="px-6 pb-6 text-center">
<img src="https://api.dicebear.com/7.x/avataaars/svg?seed=Amo&backgroundColor=CCF4DD" alt="Avatar" class="w-[90px] h-[90px] rounded-full border-[4px] border-white mt-[-45px] bg-white relative z-10 mx-auto">
<h2 class="mt-3 text-[22px] font-bold text-gray-900">阿莫</h2>
<p class="text-[15px] text-gray-500 mt-1">@lvyenet</p>
<p class="mt-4 text-[14px] text-gray-700 leading-[1.6]">
绿叶网的 “掌柜”、主程序、主设计、主编。说白了，就是什么 “杂活” 都干的那个。
</p>
<button class="mt-5 w-full bg-[#71D696] text-white font-bold py-[10px] rounded-full hover:bg-[#63BD84] transition cursor-pointer">
关注我
</button>
</div>
</div>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，我们使用了非常多的 Tailwind CSS 任意值，包括：
- 背景图和关注按钮都使用了 bg-[#71D696] 这个背景色。在真实项目开发中，指定精确的 “十六进制背景色” 是非常普遍的真实需求。
- 头像图片使用了 mt-[-45px]（上外边距为负 45 像素），这样可以让头像恰好有一半重叠在蓝色背景上，一半在白色内容区。
- 标题的 text-[22px]、副标题的 text-[15px] 以及段落的 leading-[1.6]，实现了文字排版 “像素级还原”。
Tailwind CSS 任意属性（黑科技）
前面介绍的任意值，都是建立在 Tailwind CSS 已有类名（如 w-、h-、bg-）基础上的。但如果我们要做一些特殊的高级动效或排版时，遇到了一些极其生僻的 CSS 属性（例如路径裁剪 clip-path），Tailwind CSS 并没有为它提供现成的类名前缀，这时候该怎么办呢？
不用担心，Tailwind CSS 为我们提供了一个黑科技：直接在中括号 “[]” 里写原生的 CSS 属性名和属性值。
语法：
-[属性名:属性值]说明：
只需要写一对中括号，里面采用类似原生 CSS 的键值对写法即可。这是我们在面对冷门需求时的终极兜底方案。
示例 2：使用任意属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body class="p-10 bg-gray-50 flex space-x-8">
<div class="w-40 h-40 bg-green-500 [clip-path:polygon(50%_0%,_100%_100%,_0%_100%)] flex items-center justify-center">
<span class="text-white font-bold mt-10">多边形</span>
</div>
<div class="w-40 h-40 bg-blue-500 [--my-custom-rotation:45deg] [transform:rotate(var(--my-custom-rotation))] flex items-center justify-center">
<span class="text-white font-bold">旋转</span>
</div>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，我们给大家展示了Tailwind CSS 任意属性的两个典型高级用法。
在场景 1 中，原生的 CSS 属性 clip-path（路径裁剪）在 Tailwind CSS 中并没有对应的预设类名的，然后我们直接使用了 [clip-path:polygon(...)] 语法。
需要特别注意的是，在 Tailwind 的任意值语法中，原 CSS 里面的空格必须用下划线 “_” 来代替（比如将 50% 0% 写成了 50%_0%），只有这样 Tailwind CSS 才能正确解析它。
在场景 2 中，我们在 Tailwind CSS 中直接定义并使用原生的 CSS 变量。首先我们使用 [--my-custom-rotation:45deg] 定义了一个名为 “--my-custom-rotation” 的变量，然后紧接着在 [transform:...] 中使用 var() 函数调用了它。
掌握上面这个技巧之后，以后遇到任何刁钻的生僻属性，我们都可以用中括号轻松拿下。
注意事项
虽然 Tailwind CSS 任意值非常强大，但小伙伴们在使用时要注意以下几个方面。
1. 不能有空格
在方括号 “[]” 内部，不能出现任何空格。多个值之间应该使用下划线（_）来隔开，而不是使用空格来隔开。
<!--正确-->
<div class="grid-cols-[1fr_500px_2fr]"></div>
<!--错误-->
<div class="grid-cols-[1fr 500px 2fr]"></div>2. 优先使用预设类名
有小伙伴就会问了：“既然任意值那么方便，我是不是可以全部都使用任意值呢？”
强烈不建议这样去做。任意值应该作为一种 “备选方案”，而不能作为主要手段。如果一个项目中到处都是 w-[365px]、p-[13.5px] 这样的值，那么 Tailwind CSS 的 “系统化” 优势就荡然无存了，代码也会变得难以维护。
在实际开发中，建议大家优先使用预设类名（如 p-4、m-2），只有在预设值确实无法满足设计时，再去使用任意值。
3. 语义化优先
不要过度依赖任意值。如果你发现某个数值（比如这里绿叶网的品牌色 “#0ba352”）在项目中多次出现，最好的做法是将其定义在 CSS 变量中（即 @theme 块），而不是在每个标签上都写一遍 [#0ba352]。
当然了，我们也会在后面 “Tailwind CSS @theme 指令” 一节中会详细介绍如何使用。
常见问题
1. 任意值会影响最终生成的 CSS 文件大小吗？
不会。当我们使用 Vite 等工具进行构建时，Tailwind 的编译器（v4 引擎）是非常聪明的。它只有在扫描到 w-[31px] 时，才会动态生成对应的 .w-\[31px\] { width: 31px; } 样式。对于没有用到的代码，是绝不会出现在最终文件中的。
2. 方括号里可以写变量吗？
可以的。如果在 CSS 中定义了原生 CSS 变量（如 --main-color），我们可以这样使用：bg-[var(--main-color)]。在 v4 版本中，这种结合方式变得更加高效。
