SuperAPI AI 工具集

tailwind-syntax-arbitrary-values

前端与建站

查看项目

更新于 10-16 06:18

技能介绍

用途:在 Tailwind CSS 中处理主题之外的一次性取值,如特定十六进制颜色、任意像素尺寸、calc() 表达式、自定义网格模板与不常见字体等。

主要能力:涵盖五类任意值写法——值任意(bg-[#1da1f2]、w-[calc(100%-2rem)])、修饰符任意([&_li]:list-disc)、变体任意(data-[state=open]:rotate-180)、任意属性([mask-type:luminance])与类型提示任意(bg-[length:200px_100px])。同时说明 CSS 变量写法:v3 用 bg-[var(--brand-bg)],v4 可用括号简写 bg-(--brand-bg),并给出 length、color、image、family-name、position、size 等类型提示的使用场景。

使用方式:类名需以完整字面量出现在源码中,供 JIT 扫描生成 CSS;值中的空格用下划线代替,如 grid-cols-[1fr_2fr]。动态值应改用内联 style,重复使用的值应扩展主题(v4 @theme 或 v3 tailwind.config.js),v4 中整数倍间距可直接用 mt-17 等动态整数工具类。

限制:字符串拼接或模板插值生成的类名不会生成 CSS;v4 括号简写不适用于 v3;歧义值需加类型提示;内容扫描遗漏源文件时需调整 content glob(v3)或添加 @source(v4)。v4 Oxide 引擎构建速度约快 5 倍,但类名检测规则与 v3 相同。具体版本与性能数据以官方文档为准。