@cloudai-design/tailwind

CloudAI 设计体系的主题交付物：一个 Tailwind 插件，require 一下就拿到全套语义化 CSS 变量与工具类（bg-primary、text-muted-foreground、rounded-lg…），取值与 Figma 同源。

接入

pnpm add -D @cloudai-design/tailwind

// tailwind.config.js
module.exports = {
  darkMode: ['class'],
  content: ['./src/**/*.{ts,tsx}'],
  plugins: [require('@cloudai-design/tailwind/v3/aidbs')], // 或 /v3/yaochi
};

装完即可写语义类名，不需要往 globals.css 抄一份 CSS 变量——变量由插件注入，手抄 就是第二个真源。

暗色作用域默认是 .dark；用别的选择器时传参：

plugins: [
  require('@cloudai-design/tailwind/v3/aidbs')({
    darkModeSelector: '[data-theme="dark"]',
  }),
];

.dark 已自动 safelist（它由运行时挂到 DOM，Tailwind 扫不到）。语义 token 随作用域自动 翻明暗，正常不用写 dark:。

插件注入了什么

| 类别 | 内容 | | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | CSS 变量 | 全套 shadcn 标准 token（含 --radius）+ CloudAI 自定义语义 token，明暗各一套 | | 自定义语义 | 状态色 success / warning-high / warning-medium / warning-low / normal / unknown（各带 -background、-foreground）、品牌色阶 brand-1…12、图表色 chart-1…12 | | 颜色工具类 | 上面每个 color token 都能写成 bg- / text- / border- / ring- / fill- … | | 渐变 | 整值 token（如 brand-gradient）注册在 backgroundImage，只走 bg-<key> | | 圆角 | rounded-lg / md / sm 锚定 var(--radius) | | 动效 | ease-* / duration-* token、accordion 等 keyframes、扫光与过渡组件类 | | 全局基线 | body 的底色与前景色、* 的 border-color | | 变体 | pointer-fine（只对精确指针生效的 hover / 按压） |

动效相关的曲线、时长、扫光都在插件里，组件侧不该再写内联 <style> 或裸 cubic-bezier。

可用 brand

| brand | 说明 | | -------- | ------------------------------------------------ | | aidbs | 默认，设计真源（原 dms-ai-studio） | | yaochi | 独立主题，只有亮色（.dark 下沿用亮色取值） |

design-tokens.json

每个 brand 另带一份机器可读清单：

require('@cloudai-design/tailwind/aidbs/design-tokens.json');

内含每个变量的 light / dark 取值、分组、类型，以及能写成哪些类名（classKeys）。给 lint、 文档站和 Agent 查值用——它们不该去 grep 插件源码。

版本与子路径

root 导出指向当前主推版本，/v3/<brand> 是永久链接：

| 写法 | 指向 | 什么时候会变 | | ------------------------------------- | --------------------- | ----------------------- | | @cloudai-design/tailwind | 主推版本 + 默认 brand | 主推版本翻转时（major） | | @cloudai-design/tailwind/<brand> | 主推版本 + 指定 brand | 同上 | | @cloudai-design/tailwind/v3/<brand> | 永远是 v3 | 不变 |

0.x / 1.x 期间主推 v3。Tailwind v4 通道规划中，落地时以 /v4/<brand> 提供并只翻转 root， v3 子路径不动——写子路径的业务跨 major 零改动。

零依赖

dependencies 为空，只有 peerDependencies: tailwindcss。插件运行时发射为包内的 v3/_runtime.js 而不单独发包：一旦拆开，主题数据与运行时用 ^ 松绑，就会出现「数据按 A 版运行时生成、业务装到 B 版运行时」的漂移。

这个包全是生成物

包内所有文件由仓库的 pnpm tokens:emit 从 brands/ 生成，不要手改（改了下次生成即被 覆盖）。改取值去 brands/<brand>/tokens/，改运行时去 tools/emitters/templates/v3-runtime.js。

配套

| 包 | 管什么 | | ------------------------------- | -------------------------------------------------------- | | @cloudai-design/eslint-plugin | 护栏：硬编码颜色、任意值圆角间距、v4 语法 | | @cloudai-design/cli | npx @cloudai-design/cli init --brand aidbs，装设计语境 | | @cloudai-design/skills | 给 Agent 的选型表与 token 速查（经 CLI 安装） |

React 组件源码走 shadcn registry 分发，地址由 CLI 写进业务的 components.json。