SuperAPI AI 工具集

tailwind-core-design-system

前端与建站

查看项目

更新于 10-15 22:18

技能介绍

用途:为 Tailwind CSS 项目提供设计系统层面的取值参考,帮助在间距、颜色、字号、断点、圆角、阴影与透明度等令牌体系中做出选择,让标记在令牌系统内表达意图。

主要能力:给出默认令牌速查,包括间距(0 至 96,0.25rem 步进)、颜色(22 个色系、每系 11 个色阶)、字号(text-xs 至 text-9xl)、断点(sm 640、md 768、lg 1024、xl 1280、2xl 1536)与透明度(0 至 100,5% 步进)。提供决策树,指导间距、颜色、字号与断点的取值方式,并区分 v3 与 v4 的差异。

使用方式:v3.4 通过 tailwind.config.js 的 theme.extend 定义令牌;v4.0+ 在主 CSS 的 @theme 中用 CSS 变量定义,颜色默认使用 oklch。透明度用 /N 或 /[N%] 修饰符;运行时读取令牌在 v3 用 resolveConfig,在 v4 用 getComputedStyle 读取 --color-* 变量。

适用场景:设计或挑选 Tailwind 项目取值、编写自定义主题、处理 v3 到 v4 迁移、实现令牌驱动的暗色模式。

限制:内容基于 Tailwind CSS v4.x(最后验证 2026-05-19),v3 与 v4 配置机制不同,不可共用同一代码片段;v4 移除了 resolveConfig 与 theme() 点号写法。具体项目配置与版本差异需以官方文档为准。