Web
@skyroc/tailwind-plugin
Skyroc UI 的 Tailwind CSS 插件，注入 OKLCH design tokens 与语义色阶
概览
| 项 | 值 |
|---|---|
| 包名 | @skyroc/tailwind-plugin |
| 版本 | 0.0.1 |
| 依赖 | @skyroc/color、@skyroc/ui-tokens、@unocss/core、tailwindcss |
| peer | @skyroc/web-ui |
| 测试 | ✅ generate.test.ts、index.test.ts |
@skyroc/tailwind-plugin 是 @skyroc/web-ui 的样式基础：通过 Tailwind plugin 的形式注入语义色（primary / destructive / sidebar 等）、扩展圆角与字号刻度，并支持 Web（hsl(var(--x))）与 Native（var(--x)）双平台输出。
目录结构
src/
├── index.ts # 默认导出 skyrocUIPlugin
├── generate.ts # generateCSSVars
├── presets.ts # presetSkyrocUI（UnoCSS preset）
├── themePresets.ts # skyrocUITheme
├── theme.json # 内置主题色 / 圆角 / 色板
└── types.ts主入口导出
| 类别 | 符号 |
|---|---|
| 默认 | skyrocUIPlugin（Tailwind plugin withOptions） |
| 命名 | presetSkyrocUI、skyrocUITheme、generateCSSVars |
| 常量 | builtinColors、builtinColorMap、builtinRadiuses |
| 类型 | SkyrocUIPluginOptions、ThemeColorKey、ThemeConfig、ThemeConfigColor、ThemeOptions |
使用
1. Tailwind 应用
// tailwind.config.ts
import { skyrocUIPlugin } from '@skyroc/tailwind-plugin';
export default {
content: ['./src/**/*.{ts,tsx}', './node_modules/@skyroc/web-ui/dist/**/*.js'],
plugins: [skyrocUIPlugin({ platform: 'web' })]
};platform: 'native' 时 CSS 变量改用 var(--x)（无 hsl() 包裹），适配 React Native 的 NativeWind。
2. 注入的 token
| 类别 | 示例 |
|---|---|
| 语义色 | primary、primary-foreground、destructive、muted、accent、popover |
| 表面 | background、foreground、card、border、input、ring |
| Sidebar | sidebar、sidebar-foreground、sidebar-primary、sidebar-accent、sidebar-border |
| 圆角 | rounded-xs、-sm、-md、-lg、-xl |
| 字号 | 扩展超小字号 text-2xs 等 |
3. 配合 web-ui 组件
import { Button } from '@skyroc/web-ui';
<Button variant="destructive">删除</Button>;
// → bg-destructive text-destructive-foreground 来自本插件提供的 tokengenerateCSSVars
把主题对象（ThemeOptions）转换为 :root { --primary: ...; } 的 CSS 变量字符串：
import { generateCSSVars } from '@skyroc/tailwind-plugin';
const css = generateCSSVars({
colors: { primary: '#1677ff' },
radius: 'md'
});用于运行时切换主题（被 @skyroc/web-admin-theme 消费）。
UnoCSS 兼容
presetSkyrocUI 是同一套规则的 UnoCSS 预设版本：
import { defineConfig } from 'unocss';
import { presetSkyrocUI } from '@skyroc/tailwind-plugin';
export default defineConfig({ presets: [presetSkyrocUI()] });注意：apps/admin 当前用
@sa/uno-config的presetSoybeanAdmin（更接近 admin 业务），presetSkyrocUI主要面向 web-ui playground。
与 ui-tokens 的关系
@skyroc/ui-tokens：纯 TS 常量（hex、HSL、scale），跨端、零依赖；@skyroc/tailwind-plugin：把上面的 token 应用到 Tailwind / UnoCSS 的实现层。
这种分离让 Native 端可以直接复用 tokens 而不引入 Tailwind 运行时。