2026-04-12 学习日志

今日主题

shadcn/ui + Tailwind v3 的主题存在三层间接：index.css 定义 CSS 变量(HSL值) → tailwind.config.ts 用 hsl(var(--xxx)) 桥接为 Tailwind 颜色 → 组件通过 Tailwind 类名消费。这不是设计缺陷，而是两套系统（shadcn 用 CSS 变量做主题切换，Tailwind v3 用 JS 对象定义 token）天生不共享的固有模式
Tailwind v4 通过 @theme 指令原生支持 CSS 定义设计 token，不再需要 tailwind.config.ts 作为桥接层，三层可收口为 CSS 一层
Design Token 本质就是变量，区别仅在语境：技术视角叫变量（存值复用），设计系统视角叫 token（强调这是设计师与开发者之间的命名契约，承载的是跨团队共识的设计决策）
这些是 shadcn/ui + Tailwind CSS 的主题色变量
这不是你的设计问题，是 Tailwind v3 + shadcn/ui 的固有模式
shadcn/ui 用 CSS 变量做主题切换（亮/暗模式），这是它的设计选择
Design Token 是设计系统里的术语，指的是"设计决策的最小命名单元"

它的主要作用不是给运行中的前端页面读取，而是给 shadcn CLI 读取，用来决定“往你的项目里生成组件代码时，应该生成到哪里、用什么风格、引用什么路径、接入哪份 Tailwind 配置”
作用是给编辑器提供 JSON 结构校验和提示，方便补全配置
表示当前不是按 React Server Components 的模式来生成组件，比较符合你这个 Vite + React 的前端项目
表示生成 TypeScript React 组件，也就是 .tsx 形式
表示主题颜色通过 CSS 变量方式接入，这样组件主题更统一，也更方便后续调整

这类浏览器点组件回跳 IDE 的能力，本质上不是 React 自己打开编辑器，而是浏览器先拿到 React Fiber 上的源码位置信息，再请求 Vite dev server 的 /__open-in-editor 由本机编辑器打开文件。
vite-plugin-react-click-to-component 的核心链路分成两段：一段是在 transformIndexHtml 中注入前端脚本做元素高亮、组件层级提取和点击菜单；另一段是补齐 React 开发态的 source/debug 信息，使 Fiber 能反查到 fileName、lineNumber、columnNumber。
浏览器端定位组件依赖 React 开发态内部调试结构，如 _debugInfo、_debugOwner 或 React DevTools hook；因此它天然只适用于 dev server，不是生产环境能力。
真正执行打开 IDEA 的是 Vite 自带的 launch editor middleware。插件只是把绝对路径和行列号通过 /__open-in-editor 发回本地开发服务，再由 Vite 调用当前编辑器。
选择方案时要区分两类能力：click-to-react-component 更偏 React 侧显式挂组件并指定 editor，vite-plugin-react-click-to-component 更偏复用 Vite 的 editor middleware 和页面注入，对 Vite 项目侵入更小。