SuperAPI AI 工具集

design-tokens-tailwind

前端与建站

查看项目

更新于 10-16 06:17

技能介绍

用途:把设计令牌 JSON 转换为 Tailwind CSS v4 的 CSS-first 配置,输出含 @theme { ... } 块的 CSS,通常写入共享主题文件,如 src/styles/theme.css。因 Tailwind v4 会依据 @theme 中的主题变量生成工具类,令牌命名与命名空间会影响生成结果,输入为令牌文件时优先确定性转换而非手动编辑。

主要能力:按 Tailwind v4 命名空间映射令牌,如颜色到 --color-、字体族到 --font-、字号到 --text-(行高为 --text---line-height)、字重到 --font-weight-、字距到 --tracking-、间距到 --spacing-、圆角到 --radius-、阴影到 --shadow-、断点到 --breakpoint-、缓动到 --ease-、动画到 --animate-。规范化名称:去掉 --- 后的 Figma 注释、空格与标点转连字符、小写、grey 转 gray、保留数字刻度。像素数值按 16px 根转换 rem,0 保持 0;hex、rgb()、oklch()、calc()、clamp()、var() 等有效 CSS 值原样保留。排版复合对象可映射为尺寸与行高对,同名文本刻度避免重复声明。

使用方式:先检查令牌 JSON 与现有 CSS,确认项目是否已用 Tailwind v4 CSS-first 配置。默认令牌输入 design-tokens.json,主题输出 src/styles/theme.css。可运行脚本:node scripts/generate-tailwind-theme.mjs design-tokens.json src/styles/theme.css;也可用绝对路径运行。脚本选项:--dry-run 只打印不写入;--font-var=... 控制 --font-sans;--no-font-sans 跳过默认 --font-sans;--preserve-existing 尽量合并进现有 @theme。需确保主题文件被 Tailwind 入口导入,改后按项目规范运行类型检查、lint 或构建验证。

适用场景与限制:适用于已有设计令牌 JSON 的 Tailwind v4 项目。不建议为 CSS-first 项目添加 tailwind.config.js,也不应手动编辑生成的 Payload 或迁移文件;未支持的令牌类别应在结果中说明,不能默认已转换。Tailwind 行为或迁移问题可先查 Tailwind 官方文档。详细平台限制与完整规则以资料为准。