edit-ui

开始

样式与 Tailwind

整个接入流程里唯一会让人白白搭上一个下午的步骤。

为什么必须手动加一行

包不含 CSS，是刻意的设计：颜色由宿主站点的 KunUI 主题决定。代价是 Tailwind 得知道去哪里找类名。

漏掉它，界面会静默地垮掉，不报任何错

这些包不含任何 CSS，其中每一个类都是 KunUI 的工具类；而 Tailwind v4 只会为它扫描到的文件生成工具类，node_modules 默认不在扫描范围内。没有下面这行 @source，组件用到的类根本不会被生成：没有构建错误，没有控制台警告，只有一个间距塌陷、没有边框、没有颜色的表单。

把这行加进你的 CSS 入口

按项目类型选一边，注意两者的 ../ 数量不同。

Nuxt
/* app/assets/css/main.css —— 路径相对于「这个文件」 */
@import 'tailwindcss';
@import '@kungal/ui-tokens';
@import '@kungal/ui-vue/style.css';

@source '../../../node_modules/@kungal/ui-vue';
@source '../../../node_modules/@nextmoe/edit-ui-vue/dist';
Vue + Vite
/* src/style.css —— 比 node_modules 深一层 */
@import 'tailwindcss';
@import '@kungal/ui-tokens';
@import '@kungal/ui-vue/style.css';

@source '../node_modules/@kungal/ui-vue';
@source '../node_modules/@nextmoe/edit-ui-vue/dist';

五个容易写错的细节

按被问到的频率排序。

  • 指向 /dist，不要指向包根目录

    dist 是这个包唯一发布的目录；把扫描范围收窄，产出的 CSS 也只包含真正用到的类。

  • 路径相对于 CSS 文件本身

    不是相对于项目根目录。入口在 app/assets/css/main.css 的 Nuxt 项目需要三个 ../ 才能回到 node_modules，入口在 src/style.css 的 Vite 项目只需要一个。

  • 两个目录通常都被 git 忽略，Tailwind 照样会扫

    显式写出的 @source 不受自动内容探测规则的约束。如果类名还是缺，先检查路径本身写对没有。

  • KunUI 也要同样处理

    上面第二行 @source 同样不是可选项；而 @kungal/ui-tokens 才是这些类名背后色板的定义处。

  • 深色模式是 <html> 上的 .kun-dark-mode 类

    KunUI 自己的开关。组件内部从不写 dark: 前缀，只用会自动翻转的语义 token。