用途:@duskmoon-dev/core 是面向 Tailwind CSS v4 的纯 CSS 组件库,使用 Material Design 3 扩展颜色体系,用于构建带主题切换能力的界面。
安装:可用 bun add @duskmoon-dev/core tailwindcss@^4.0.0,或 npm install @duskmoon-dev/core tailwindcss@^4.0.0,或 pnpm add @duskmoon-dev/core tailwindcss@^4.0.0。
配置:方式一为 CSS 导入,在样式文件中写 @import "tailwindcss"; 与 @import "@duskmoon-dev/core";;方式二为 Tailwind 插件,写 @import "tailwindcss"; 与 @plugin "@duskmoon-dev/core/plugin";,后者会把 MD3 颜色令牌注册进 Tailwind 主题,支持 bg-primary、text-on-surface 等工具类。主题通过 HTML 元素的 data-theme 属性应用,如 data-theme="sunshine" 为浅色、data-theme="moonlight" 为深色;也可用 document.documentElement.dataset.theme 在脚本中切换。
主要能力:覆盖操作、数据录入、数据展示、反馈、导航、布局、工具类与表面等类别,包含按钮、聊天、卡片、输入框、提示、导航栏、标签页、对话框、嵌套菜单、主题控制器、切换按钮和响应式网格等组件,并提供颜色工具类与 CSS 变量(如 --color-primary、--color-primary-content、--color-outline)。聊天组件面向 LLM 场景,含 chat-start、chat-end、chat-bubble、chat-reasoning、chat-tool 及 pending、running、success、error 状态和 chat-typing。
用法:按需引入单个组件,如 @import "@duskmoon-dev/core/components/button";也可在 JS/TS 中导入;仅需主题时导入 @import "@duskmoon-dev/core/themes/sunshine"。组件还可导出名为 css 的命名导出,用于 Web Components 或自定义元素。
限制:资料未提供浏览器兼容范围、体积数据、收费与价格信息,暂未提供。