用途:在 Tailwind CSS v4 中编写可接收参数的自定义功能型工具类(functional utilities),用 CSS 优先的 @utility 指令替代 v3 的 matchUtilities() JS 插件。仅适用于 v4;在 v3 中这些 CSS 函数不被识别,构建会静默输出无效 CSS。
主要能力:四个函数——--value(<类型或命名空间>) 解析 name-* 工具类的后缀(支持类型、字面量列表、主题命名空间、方括号任意值);--modifier(<类型或命名空间>) 解析 name-X/Y 中斜杠后的部分,可用 --default(...) 设默认值;--alpha(var(--color-*) / <百分比>) 通过 color-mix() 为颜色叠加透明度;--spacing(<数字>) 返回 calc(var(--spacing) * <数字>)。
使用方式:在 @utility <name>-* { ... } 块中写多行 --value(...) 以同时接受主题键、裸值和任意方括号值,CSS 级联取首个匹配。例如 @theme 定义 --tab-size-github: 8,再写 @utility tab-* { tab-size: --value(--tab-size-); tab-size: --value(integer); tab-size: --value([integer]); },即可支持 tab-github、tab-2、tab-[76]。类型提示需按参数选择:integer、number、ratio、percentage、[length]、[color]、[angle]、[url]、字面量集合或 []。
适用场景:需要参数化工具类、主题命名空间扩展、斜杠修饰符(如 text-base/relaxed)、颜色透明度组合、间距计算等。
限制:不可用于 v3;--value() 必须带类型或命名空间,空调用是解析错误;命名空间须用通配符 --value(--namespace-);方括号形式必须带方括号,无单位数字走裸值形式;--alpha() 只接受 var(--color-),原始十六进制需直接用 color-mix();--spacing() 不宜在 calc() 外用于普通值。除需 Node 专属逻辑外,v4 项目不应再发布 JS 插件。