第 3 篇设计 Tokens——统一样式的唯一来源本篇目标把「统一样式」落到一组真实的 CSS 变量设计变量 / Tokens上让所有页面、所有组件、包括 AI 都只认这一套变量而不是各自硬编码颜色。1. shadcn-vue init 已经给你了 Tokens第 2 篇执行shadcn-vue init后src/style.css里已经生成了完整的变量系统具体色值由你 init 时选的 base color 决定以生成的文件为准大致结构如下importtailwindcss;themeinline{--color-background:var(--background);--color-foreground:var(--foreground);--color-card:var(--card);--color-primary:var(--primary);--color-primary-foreground:var(--primary-foreground);--color-secondary:var(--secondary);--color-muted:var(--muted);--color-accent:var(--accent);--color-destructive:var(--destructive);--color-border:var(--border);--color-input:var(--input);--color-ring:var(--ring);--radius-sm:calc(var(--radius)- 4px);--radius-md:calc(var(--radius)- 2px);--radius-lg:var(--radius);--radius-xl:calc(var(--radius) 4px);}:root{--background:oklch(...);--foreground:oklch(...);--primary:oklch(...);--radius:0.625rem;/* ... 其余变量 */}.dark{--background:oklch(...);/* ... 明暗两套 */}关键点这套变量就是统一样式的物理载体。所有 shadcn-vue 组件Button、Input、Card…都通过bg-primary、text-foreground、border-border这类 Tailwind 语义类引用它们改一处全局生效。2. 你只需要再补两类 Tokensshadcn 默认给了颜色和圆角间距和字体建议补成显式变量方便统一节奏在src/style.css里追加示例值可按喜好调themeinline{/* 间距节奏页面留白、卡片间距、表单纵向间距统一走 8 的倍数 */--spacing-page:24px;--spacing-card:16px;--spacing-field:16px;/* 字体标题 / 正文 / 辅助文字 三个字号档 */--text-title:16px;--text-body:14px;--text-caption:12px;}说明这是本系列自研约定写在theme inline里即可得到bg-page、text-title之类的 Tailwind 工具类Tailwind v4 的 theme 机制真实可用。若你的版本没生效退而求其次直接在 :root 里定义普通 CSS 变量组件里用stylemargin: var(--spacing-page)引用。3. 明暗主题默认就支持shadcn-vue 默认在根元素加.dark类即切换暗色。做一个切换按钮script setup langts import { onMounted, ref } from vue const isDark ref(false) function toggle() { isDark.value !isDark.value document.documentElement.classList.toggle(dark, isDark.value) } // 可选记住选择 onMounted(() { if (localStorage.getItem(theme) dark) toggle() }) /script template button clicktoggle{{ isDark ? 切到亮色 : 切到暗色 }}/button /template4. 让「统一样式」真正生效的三条纪律组件只许用语义类bg-primary、text-muted-foreground禁止硬编码色值#3b82f6。间距走变量var(--spacing-*)或对应工具类禁止随手px-3py-2乱配。AI 生成的任何样式代码先过这条规则再进仓库第 8 篇会给提示词模板。只要守住这三条任何新页面、新组件都会被 Tokens 约束住这就是「AI 没机会把样式搞乱」的机制保障。5. 验证写一个混合了主要 Token 的示例页肉眼确认统一性template div classmin-h-screen bg-background p-[var(--spacing-page)] text-foreground div classrounded-[var(--radius-lg)] border border-border bg-card p-6 h1 classtext-[var(--text-title)] font-semibold标题档/h1 p classtext-[var(--text-body)] text-muted-foreground正文档文字/p span classtext-[var(--text-caption)]辅助文字档/span /div /div /template亮色 / 暗色切换时页面整体跟着换 → 明暗生效只改--primary一个值全局主色跟着变 → Tokens 生效本篇小结统一样式 一组设计变量shadcn-vue 已替你生成颜色和圆角你补上间距、字体节奏并立下「只用语义类」的纪律下一步把「统一布局」也固定下来第 4 篇布局骨架