一、任意值语法任意值arbitrary value让你在不需要修改主题的情况下直接使用任意 CSS 值用方括号[]包裹。1. 方括号 [] 基础用法作用说明在工具类后接-[值]即可生成对应的任意值工具类。!-- 任意字号、颜色、尺寸 --pclasstext-[15px]15px 字号/pdivclassbg-[#1e293b]自定义颜色/divdivclassw-[360px]宽度 360px/div2. 常见场景颜色、尺寸、间距作用说明任意值常用于一次性颜色、精确尺寸和特殊间距避免频繁改动主题。场景示例生成的 CSS颜色bg-[#ff6600]background-color: #ff6600颜色带透明度bg-[#ff6600]/4040% 不透明度尺寸w-[200px]width: 200px间距mt-[7px]margin-top: 7px多值grid-cols-[200px_1fr]grid-template-columns: 200px 1frdivclassbg-[#ff6600] p-[14px] text-[13px]任意颜色、间距、字号/div二、空格转义与下划线1. 空格用下划线代替作用说明类名中不能有空格任意值里需要空格时用下划线_代替Tailwind 构建时会把它转回空格。!-- 1fr 和 2fr 之间原本是空格用下划线代替 --divclassgrid grid-cols-[1fr_2fr]div左侧/divdiv右侧/div/div!-- minmax(0, 1fr) 中间的空格同理 --divclassgrid-cols-[minmax(0,1fr)_1fr].../div2. 需要真正下划线时的处理作用说明如果值本身就需要下划线有两种情况url()内部的下划线会自动保留其他位置可用反斜杠\_转义保留。情况写法结果URL 中的下划线bg-[url(/my_image.png)]下划线保留非 URL 的下划线content-[hello\_world]保留hello_world!-- URL 里的下划线正常保留 --divclassbg-[url(/images/hero_image.png)]/div避坑指南大多数时候只要记住“空格写_”即可真正需要字面下划线且不在url()内时再用反斜杠转义。三、任意属性1. [property:value] 写法作用说明当某个 CSS 属性没有对应的 Tailwind 工具类时可以直接写[属性:值]生成任意属性。divclass[mask-type:luminance]自定义属性/div2. 示例!-- 设置 CSS 变量 --divclass[--brand-color:#ff6600] bg-[var(--brand-color)]用变量控制颜色/div!-- 不常见的属性 --divclass[scrollbar-width:thin]细滚动条/div!-- 结合变体使用 --divclasshover:[text-decoration-color:#ff6600]悬停改变装饰线颜色/div四、任意选择器或变体1. [:selector] 写法作用说明用[:选择器]可以创建任意选择器变体代表当前元素用来精确匹配伪类、子元素或复杂结构。!-- 第 3 个子元素加下划线 --ulliclass[:nth-child(3)]:underline第三项/li/ul2. 示例!-- 匹配内部所有 p 标签 --divclass[_p]:mt-4p段落一/pp段落二/p/div!-- 匹配特定后代 --articleclass[h2]:text-xlh2标题/h2/article!-- 需要空格时同样用下划线 --divclass[_a:hover]:underlineahref#悬停显示下划线/a/div五、动态类名的坑1. 为什么不能字符串拼接类名作用说明Tailwind 通过扫描源码中的完整字符串来发现类名如果类名是运行时拼接出来的它无法被扫描到对应 CSS 就不会生成。// 错误Tailwind 扫不到 bg-red-500 这种完整类名 const color red; div className{bg-${color}-500}错误写法/div;// 正确写出完整类名让 Tailwind 能扫描到 const colorMap { red: bg-red-500, blue: bg-blue-500, }; div className{colorMap[color]}正确写法/div;避坑指南动态部分尽量用“完整类名映射表”而不是拼接必要时配合 safelist 或任意值。2. safelist 安全清单作用说明safelist 用来“手动保底”生成某些扫描不到的类名。v4 推荐用source inline()把类名字符串加入扫描来源。/* 把这些字符串当作源码内容参与扫描 */sourceinline(bg-red-500);sourceinline(bg-blue-500);sourceinline(hover:bg-red-600);// 若仍使用 JS 配置可在 safelist 中列出// tailwind.config.jsv4 中通常不再需要module.exports{safelist:[bg-red-500,bg-blue-500],};使用指南safelist 是兜底手段尽量少用能用完整类名或任意值解决时优先选择更直观的写法避免把大量类名硬编码进安全清单。