用途:在消费端应用中正确集成 Kuzenbo,完成可靠安装、Tailwind v4 接线、主题定制与符合库设计模式的组件使用。适用于安装或升级 kuzenbo、为 Kuzenbo 样式配置 Tailwind CSS v4、渲染与组合组件、定制颜色/圆角/明暗主题、排查无样式组件或缺失类,以及编写产品代码库使用文档。
要求:React 18+ 或 19+、Node.js 22+、Tailwind CSS v4。安装命令:npm install kuzenbo,或 pnpm add kuzenbo、yarn add kuzenbo、bun add kuzenbo。
必要 Tailwind v4 设置:在主全局 CSS 中加入 @import "tailwindcss"; @import "kuzenbo/styles.css"; @source "../node_modules/kuzenbo/dist";。@source 必须相对该 CSS 文件位置,而非项目根目录;使用 pnpm 时建议显式写 .../kuzenbo/dist 路径。
主要能力:提供快速集成流程(安装与对等依赖、加入全局 CSS 导入与 @source、渲染冒烟测试组件、添加最小主题覆盖、验证明暗模式、按需加入可选 Provider、仅为实际使用的组件补齐缺失对等依赖);给出组件与对等依赖映射(如 Calendar 需 react-day-picker、Carousel 需 embla-carousel 与 embla-carousel-react、Chart 需 recharts、Command 需 cmdk、Drawer 需 vaul、Dropzone 需 react-dropzone、InputOTP 需 input-otp、QRCode 需 qrcode 与 culori、Resizable 需 react-resizable-panels、Textarea 需 react-textarea-autosize、VideoPlayer 需 media-chrome 等);说明框架接线(Next.js App Router 将导入放入 app/globals.css 并由 app/layout.tsx 引入;Vite/SPA 放入 src/index.css 或 src/app.css 并在 src/main.tsx 引入一次);给出简单组件、复合组件与泛型组件(Select、Combobox、Autocomplete)用法;可选 Provider 与工具包括 CSPProvider、DirectionProvider、mergeProps、useRender。
主题:基于语义 CSS 变量,:root 定义亮色令牌,.dark 定义暗色令牌,@theme inline 映射为 Tailwind 变量;暗色通过 @custom-variant dark (&:is(.dark *)) 实现,需存在 .dark 祖先。可覆盖 --radius、--background、--foreground、--primary、--border、--ring、状态令牌、图表与侧边栏令牌等;--radius 会派生 --radius-sm 至 --radius-4xl。建议先覆盖核心令牌,再补状态令牌,明暗两处同步镜像,并校验对比度。支持作用域主题(如 .theme-ocean)。
限制与注意:不要编辑 node_modules/kuzenbo/styles.css,应在应用 CSS 中覆盖令牌;不要遗漏 .dark 对应覆盖;不要跳过 @source,否则 Tailwind 可能清除所需类;优先覆盖语义令牌而非逐组件硬编码颜色。排查要点:无样式时检查样式导入与 @source 路径并重启开发服务器;覆盖不生效时确认声明顺序与 .dark 祖先;模块缺失时按映射安装对等依赖;泛型组件类型报错时显式传入类型参数。完成标准:CSS 设置齐全、至少一个组件按预期渲染、明暗主题覆盖生效、所用组件对等依赖已安装、可无运行时错误导入使用。