duskmoon-dev-core

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

@duskmoon-dev/core Skill

@duskmoon-dev/core 使用教程

Overview

概述

@duskmoon-dev/core

is a CSS-only component library for Tailwind CSS v4 with Material Design 3's extended color system.

@duskmoon-dev/core

是一个仅包含CSS的组件库，适用于Tailwind CSS v4，采用Material Design 3的扩展色彩系统。

Installation

安装

bash

undefined

bash

undefined

Bun

bun add @duskmoon-dev/core tailwindcss@^4.0.0

npm

npm install @duskmoon-dev/core tailwindcss@^4.0.0

pnpm

pnpm add @duskmoon-dev/core tailwindcss@^4.0.0

undefined

pnpm add @duskmoon-dev/core tailwindcss@^4.0.0

undefined

Setup

配置

Option A: CSS Import (Recommended)

选项A：CSS导入（推荐）

css

@import "tailwindcss";
@import "@duskmoon-dev/core";

css

@import "tailwindcss";
@import "@duskmoon-dev/core";

Option B: Tailwind Plugin

选项B：Tailwind插件

css

@import "tailwindcss";
@plugin "@duskmoon-dev/core/plugin";

The

@plugin

approach registers MD3 color tokens into Tailwind's theme, enabling utility classes like

bg-primary

text-on-surface

, etc.

css

@import "tailwindcss";
@plugin "@duskmoon-dev/core/plugin";

@plugin

方式会将MD3颜色标记注册到Tailwind的主题中，支持

bg-primary

、

text-on-surface

等工具类。

Theme Configuration

主题配置

Apply theme via

data-theme

attribute on HTML element:

html

<html data-theme="sunshine">  <!-- Light theme -->
<html data-theme="moonlight"> <!-- Dark theme -->

通过HTML元素上的

data-theme

属性应用主题：

html

<html data-theme="sunshine">  <!-- 浅色主题 -->
<html data-theme="moonlight"> <!-- 深色主题 -->

Available Components

可用组件

Actions

操作组件

btn

- Buttons with variants:

btn-primary

btn-secondary

btn-tertiary

btn-outline

btn-ghost

btn-text

btn-loading

circle-menu

- Radial navigation menu:

circle-menu-toggler

circle-menu-list

circle-menu-item

circle-menu-label

circle-menu-primary

circle-menu-secondary

circle-menu-tertiary

circle-menu-info

circle-menu-success

circle-menu-warning

circle-menu-error

circle-menu-sm

circle-menu-lg

file-upload

- Drag-and-drop file uploader:

file-upload-dropzone

file-upload-primary

file-upload-compact

file-upload-button

file-upload-sm

file-upload-lg

file-upload-ghost

toggle-btn

- Toggle buttons and groups:

toggle-btn-active

toggle-btn-primary

toggle-btn-ghost

toggle-btn-sm

toggle-btn-lg

toggle-group

toggle-segmented

toggle-chip

toggle-filled

toggle-outlined

btn

- 按钮，包含变体：

btn-primary

、

btn-secondary

、

btn-tertiary

、

btn-outline

、

btn-ghost

、

btn-text

、

btn-loading

circle-menu

- 径向导航菜单：

circle-menu-toggler

、

circle-menu-list

、

circle-menu-item

、

circle-menu-label

、

circle-menu-primary

、

circle-menu-secondary

、

circle-menu-tertiary

、

circle-menu-info

、

circle-menu-success

、

circle-menu-warning

、

circle-menu-error

、

circle-menu-sm

、

circle-menu-lg

file-upload

- 拖拽式文件上传组件：

file-upload-dropzone

、

file-upload-primary

、

file-upload-compact

、

file-upload-button

、

file-upload-sm

、

file-upload-lg

、

file-upload-ghost

toggle-btn

- 切换按钮及按钮组：

toggle-btn-active

、

toggle-btn-primary

、

toggle-btn-ghost

、

toggle-btn-sm

、

toggle-btn-lg

、

toggle-group

、

toggle-segmented

、

toggle-chip

、

toggle-filled

、

toggle-outlined

Data Entry

数据录入组件

input

- Text inputs:

input-primary

input-secondary

input-error

textarea

- Multi-line text:

textarea-primary

textarea-resize-none

textarea-resize-vertical

select

- Dropdown selection:

select-primary

select-filled

select-outlined

cascader

- Hierarchical selection:

cascader

cascader-panel

cascader-menu

checkbox

- Checkboxes:

checkbox-primary

checkbox-indeterminate

checkbox-group

radio

- Radio buttons:

radio-primary

radio-group

radio-group-horizontal

```
switch
```
- Toggle switches:
```
switch-primary
```
,
```
switch-secondary
```
```
slider
```
- Range sliders

segment-control

- Segmented buttons:

segment-control

segment-control-item

```
autocomplete
```
- Search with suggestions
```
datepicker
```
- Calendar: date, datetime, date range, datetime range pickers
```
time-input
```
- Time selection:
```
time-input
```
,
```
time-input-picker
```
```
file-upload
```
- Drag-and-drop file uploader
```
rating
```
- Star/heart ratings
```
otp-input
```
- OTP verification:
```
otp-input
```
,
```
otp-input-field
```
```
pin-input
```
- PIN entry:
```
pin-input
```
,
```
pin-input-masked
```

multi-select

- Multiple selection:

multi-select

multi-select-tag

```
tree-select
```
- Hierarchical dropdown:
```
tree-select
```
,
```
tree-select-node
```

form-group

- Form layout:

form-group

form-label

helper-text

fieldset

theme-controller

- Theme switching:

theme-controller

(inline switch),

theme-controller-dropdown

theme-controller-item

theme-controller-label

input

- 文本输入框：

input-primary

、

input-secondary

、

input-error

textarea

- 多行文本框：

textarea-primary

、

textarea-resize-none

、

textarea-resize-vertical

select

- 下拉选择框：

select-primary

、

select-filled

、

select-outlined

cascader

- 级联选择器：

cascader

、

cascader-panel

、

cascader-menu

checkbox

- 复选框：

checkbox-primary

、

checkbox-indeterminate

、

checkbox-group

radio

- 单选按钮：

radio-primary

、

radio-group

、

radio-group-horizontal

```
switch
```
- 切换开关：
```
switch-primary
```
、
```
switch-secondary
```
```
slider
```
- 范围滑块

segment-control

- 分段按钮：

segment-control

、

segment-control-item

```
autocomplete
```
- 带建议的搜索组件
```
datepicker
```
- 日历组件：日期、日期时间、日期范围、日期时间范围选择器
```
time-input
```
- 时间选择组件：
```
time-input
```
、
```
time-input-picker
```
```
file-upload
```
- 拖拽式文件上传组件
```
rating
```
- 星级/心形评分组件
```
otp-input
```
- OTP验证码输入框：
```
otp-input
```
、
```
otp-input-field
```
```
pin-input
```
- PIN码输入框：
```
pin-input
```
、
```
pin-input-masked
```

multi-select

- 多选组件：

multi-select

、

multi-select-tag

```
tree-select
```
- 树形下拉选择器：
```
tree-select
```
、
```
tree-select-node
```

form-group

- 表单布局：

form-group

、

form-label

、

helper-text

、

fieldset

theme-controller

- 主题切换组件：

theme-controller

（行内开关）、

theme-controller-dropdown

、

theme-controller-item

、

theme-controller-label

Data Display

数据展示组件

```
card
```
- Content containers:
```
card-body
```
,
```
card-title
```
```
badge
```
- Status indicators:
```
badge-primary
```
,
```
badge-dot
```
```
avatar
```
- User images:
```
avatar-lg
```
,
```
avatar-status-online
```
```
chip
```
- Tags/filters:
```
chip-primary
```
,
```
chip-removable
```
```
table
```
- Data tables:
```
table-hover
```
,
```
table-striped
```
```
list
```
- Vertical lists:
```
list-item
```
,
```
list-item-interactive
```
```
timeline
```
- Chronological events

skeleton

- Loading placeholders:

skeleton-text

skeleton-circle

skeleton-rect

skeleton-wave

skeleton-avatar

skeleton-button

skeleton-card

skeleton-group

code-block

- Styled code containers:

code-header

code-title

code-language

code-content

code-block-compact

code-block-borderless

```
card
```
- 内容容器：
```
card-body
```
、
```
card-title
```
```
badge
```
- 状态指示器：
```
badge-primary
```
、
```
badge-dot
```
```
avatar
```
- 用户头像：
```
avatar-lg
```
、
```
avatar-status-online
```
```
chip
```
- 标签/过滤器：
```
chip-primary
```
、
```
chip-removable
```
```
table
```
- 数据表格：
```
table-hover
```
、
```
table-striped
```
```
list
```
- 垂直列表：
```
list-item
```
、
```
list-item-interactive
```
```
timeline
```
- 时间线组件

skeleton

- 加载占位符：

skeleton-text

、

skeleton-circle

、

skeleton-rect

、

skeleton-wave

、

skeleton-avatar

、

skeleton-button

、

skeleton-card

、

skeleton-group

code-block

- 样式化代码容器：

code-header

、

code-title

、

code-language

、

code-content

、

code-block-compact

、

code-block-borderless

Feedback

反馈组件

alert

- Messages:

alert-success

alert-error

alert-warning

alert-info

```
dialog
```
- Modal dialogs:
```
dialog-backdrop
```
,
```
dialog-md
```
```
modal
```
- Full overlays
```
toast
```
- Notifications:
```
toast-success
```
,
```
toast-show
```
```
snackbar
```
- Brief messages

progress

- Loading:

progress-primary

progress-indeterminate

```
skeleton
```
- Placeholders:
```
skeleton-text
```
,
```
skeleton-circle
```
```
tooltip
```
- Hover info:
```
tooltip-top
```
,
```
tooltip-bottom
```

alert

- 提示消息：

alert-success

、

alert-error

、

alert-warning

、

alert-info

```
dialog
```
- 模态对话框：
```
dialog-backdrop
```
、
```
dialog-md
```
```
modal
```
- 全屏遮罩弹窗
```
toast
```
- 通知组件：
```
toast-success
```
、
```
toast-show
```
```
snackbar
```
- 简短提示消息

progress

- 进度条：

progress-primary

、

progress-indeterminate

```
skeleton
```
- 占位符：
```
skeleton-text
```
、
```
skeleton-circle
```
```
tooltip
```
- 悬停提示：
```
tooltip-top
```
、
```
tooltip-bottom
```

Navigation

导航组件

breadcrumbs

- Breadcrumb navigation:

breadcrumb-item

breadcrumb-item-active

breadcrumb-item-disabled

breadcrumb-link

breadcrumb-separator

breadcrumb-icon

breadcrumb-home

breadcrumb-home-icon

breadcrumb-ellipsis

breadcrumbs-contained

breadcrumbs-sm

breadcrumbs-lg

breadcrumbs-nowrap

navbar

- Top navigation:

navbar-surface-container-high

navbar-start

navbar-center

navbar-end

tabs

- Tab navigation:

tab

tab-active

tabs-boxed

tabs-lifted

tab-sm

tab-lg

tab-xs

menu

- Dropdown/context menu:

menu-item

menu-title

menu-horizontal

menu-vertical

```
drawer
```
- Side panels:
```
drawer-left
```
,
```
drawer-open
```

nested-menu

- Collapsible sidebar:

nested-menu

nested-menu-title

nested-menu-bordered

nested-menu-compact

pagination

- Page navigation:

pagination-item

pagination-item-active

pagination-item-disabled

pagination-prev

pagination-next

pagination-ellipsis

pagination-compact

pagination-responsive

pagination-info

pagination-input

pagination-item-active-primary

pagination-item-active-secondary

pagination-item-active-tertiary

```
bottom-nav
```
- Mobile navigation:
```
bottom-nav-item
```

stepper

- Multi-step:

stepper-step-active

stepper-step-completed

breadcrumbs

- 面包屑导航：

breadcrumb-item

、

breadcrumb-item-active

、

breadcrumb-item-disabled

、

breadcrumb-link

、

breadcrumb-separator

、

breadcrumb-icon

、

breadcrumb-home

、

breadcrumb-home-icon

、

breadcrumb-ellipsis

、

breadcrumbs-contained

、

breadcrumbs-sm

、

breadcrumbs-lg

、

breadcrumbs-nowrap

navbar

- 顶部导航栏：

navbar-surface-container-high

、

navbar-start

、

navbar-center

、

navbar-end

tabs

- 标签页导航：

tab

、

tab-active

、

tabs-boxed

、

tabs-lifted

、

tab-sm

、

tab-lg

、

tab-xs

menu

- 下拉/上下文菜单：

menu-item

、

menu-title

、

menu-horizontal

、

menu-vertical

```
drawer
```
- 侧边面板：
```
drawer-left
```
、
```
drawer-open
```

nested-menu

- 可折叠侧边栏：

nested-menu

、

nested-menu-title

、

nested-menu-bordered

、

nested-menu-compact

pagination

- 分页导航：

pagination-item

、

pagination-item-active

、

pagination-item-disabled

、

pagination-prev

、

pagination-next

、

pagination-ellipsis

、

pagination-compact

、

pagination-responsive

、

pagination-info

、

pagination-input

、

pagination-item-active-primary

、

pagination-item-active-secondary

、

pagination-item-active-tertiary

```
bottom-nav
```
- 移动端底部导航：
```
bottom-nav-item
```

stepper

- 多步骤组件：

stepper-step-active

、

stepper-step-completed

Layout

布局组件

```
divider
```
- Separators:
```
divider-dashed
```
,
```
divider-vertical
```
```
appbar
```
- Action bars:
```
appbar-top
```
,
```
appbar-bottom
```
```
markdown-body
```
- GitHub-style markdown typography: single class applied to a container, styles all child elements (headings, code, tables, blockquotes, lists)

grid-cols-auto-fill-*

- Responsive grid with auto-fill:

grid-cols-auto-fill-48

grid-cols-auto-fill-64

grid-cols-auto-fit-*

- Responsive grid with auto-fit:

grid-cols-auto-fit-48

grid-cols-auto-fit-64

```
divider
```
- 分隔线：
```
divider-dashed
```
、
```
divider-vertical
```
```
appbar
```
- 操作栏：
```
appbar-top
```
、
```
appbar-bottom
```
```
markdown-body
```
- GitHub风格的Markdown排版：为容器添加单个类，即可样式化所有子元素（标题、代码、表格、引用、列表）

grid-cols-auto-fill-*

- 自动填充响应式网格：

grid-cols-auto-fill-48

、

grid-cols-auto-fill-64

grid-cols-auto-fit-*

- 自适应响应式网格：

grid-cols-auto-fit-48

、

grid-cols-auto-fit-64

Utilities

工具类

```
sr-only
```
- Screen reader only (visually hidden but accessible)
```
not-sr-only
```
- Undo sr-only for focus states

```
sr-only
```
- 仅屏幕阅读器可见（视觉隐藏但可访问）
```
not-sr-only
```
- 取消sr-only效果，适用于聚焦状态

Surfaces

表层组件

```
accordion
```
- Expandable panels:
```
accordion-item-open
```
```
bottomsheet
```
- Mobile panels:
```
bottom-sheet-show
```
```
popover
```
- Contextual overlays:
```
popover-top
```
,
```
popover-show
```
```
collapse
```
- Collapsible content

```
accordion
```
- 可展开面板：
```
accordion-item-open
```
```
bottomsheet
```
- 移动端底部面板：
```
bottom-sheet-show
```
```
popover
```
- 上下文浮层：
```
popover-top
```
、
```
popover-show
```
```
collapse
```
- 可折叠内容

Usage Examples

使用示例

Buttons

按钮

html

<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary btn-outline">Outlined</button>
<button class="btn btn-tertiary btn-ghost">Ghost</button>
<button class="btn btn-primary btn-loading">Loading...</button>

html

<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary btn-outline">Outlined</button>
<button class="btn btn-tertiary btn-ghost">Ghost</button>
<button class="btn btn-primary btn-loading">Loading...</button>

Cards

卡片

html

<div class="card">
  <div class="card-body">
    <h2 class="card-title">Title</h2>
    <p>Content</p>
  </div>
</div>

html

<div class="card">
  <div class="card-body">
    <h2 class="card-title">Title</h2>
    <p>Content</p>
  </div>
</div>

Forms

表单

html

<input type="text" class="input" placeholder="Default" />
<input type="text" class="input input-primary" placeholder="Primary" />
<input type="text" class="input input-error" placeholder="Error" />

html

<input type="text" class="input" placeholder="Default" />
<input type="text" class="input input-primary" placeholder="Primary" />
<input type="text" class="input input-error" placeholder="Error" />

Alerts

提示框

html

<div class="alert alert-success">Success message</div>
<div class="alert alert-error">Error message</div>
<div class="alert alert-warning">Warning message</div>
<div class="alert alert-info">Info message</div>

html

<div class="alert alert-success">Success message</div>
<div class="alert alert-error">Error message</div>
<div class="alert alert-warning">Warning message</div>
<div class="alert alert-info">Info message</div>

Navigation

导航栏

html

<nav class="navbar navbar-surface-container-high">
  <div class="navbar-start">
    <a class="navbar-brand">Logo</a>
  </div>
  <div class="navbar-center">
    <a class="navbar-item navbar-item-active">Home</a>
    <a class="navbar-item">About</a>
  </div>
</nav>

html

<nav class="navbar navbar-surface-container-high">
  <div class="navbar-start">
    <a class="navbar-brand">Logo</a>
  </div>
  <div class="navbar-center">
    <a class="navbar-item navbar-item-active">Home</a>
    <a class="navbar-item">About</a>
  </div>
</nav>

Tabs

标签页

html

<div class="tabs">
  <button class="tab tab-active">Tab 1</button>
  <button class="tab">Tab 2</button>
</div>

html

<div class="tabs">
  <button class="tab tab-active">Tab 1</button>
  <button class="tab">Tab 2</button>
</div>

Dialog

对话框

html

<div class="dialog-backdrop dialog-backdrop-show">
  <div class="dialog dialog-md">
    <div class="dialog-header">
      <h2 class="dialog-title">Title</h2>
    </div>
    <div class="dialog-body">Content</div>
    <div class="dialog-actions">
      <button class="btn btn-text">Cancel</button>
      <button class="btn btn-filled">Confirm</button>
    </div>
  </div>
</div>

html

<div class="dialog-backdrop dialog-backdrop-show">
  <div class="dialog dialog-md">
    <div class="dialog-header">
      <h2 class="dialog-title">Title</h2>
    </div>
    <div class="dialog-body">Content</div>
    <div class="dialog-actions">
      <button class="btn btn-text">Cancel</button>
      <button class="btn btn-filled">Confirm</button>
    </div>
  </div>
</div>

Nested Menu

嵌套菜单

html

<ul class="nested-menu nested-menu-bordered">
  <li class="nested-menu-title">Getting Started</li>
  <li><a href="/install">Installation</a></li>
  <li><a href="/config" class="active">Configuration</a></li>
  <li>
    <details open>
      <summary>Components</summary>
      <ul>
        <li><a href="/button">Button</a></li>
        <li><a href="/card">Card</a></li>
      </ul>
    </details>
  </li>
</ul>

html

<ul class="nested-menu nested-menu-bordered">
  <li class="nested-menu-title">Getting Started</li>
  <li><a href="/install">Installation</a></li>
  <li><a href="/config" class="active">Configuration</a></li>
  <li>
    <details open>
      <summary>Components</summary>
      <ul>
        <li><a href="/button">Button</a></li>
        <li><a href="/card">Card</a></li>
      </ul>
    </details>
  </li>
</ul>

Theme Controller

主题控制器

html

<!-- Inline switch mode -->
<div class="theme-controller">
  <input type="radio" name="theme" value="sunshine" class="theme-controller-item" checked />
  <label class="theme-controller-label">Light</label>
  <input type="radio" name="theme" value="moonlight" class="theme-controller-item" />
  <label class="theme-controller-label">Dark</label>
</div>

<!-- Dropdown mode -->
<details class="theme-controller-dropdown">
  <summary class="theme-controller-trigger">Theme</summary>
  <div class="theme-controller-menu">
    <input type="radio" name="theme" value="sunshine" class="theme-controller-item" checked />
    <label class="theme-controller-label">Sunshine</label>
    <input type="radio" name="theme" value="moonlight" class="theme-controller-item" />
    <label class="theme-controller-label">Moonlight</label>
  </div>
</details>

html

<!-- 行内开关模式 -->
<div class="theme-controller">
  <input type="radio" name="theme" value="sunshine" class="theme-controller-item" checked />
  <label class="theme-controller-label">Light</label>
  <input type="radio" name="theme" value="moonlight" class="theme-controller-item" />
  <label class="theme-controller-label">Dark</label>
</div>

<!-- 下拉菜单模式 -->
<details class="theme-controller-dropdown">
  <summary class="theme-controller-trigger">Theme</summary>
  <div class="theme-controller-menu">
    <input type="radio" name="theme" value="sunshine" class="theme-controller-item" checked />
    <label class="theme-controller-label">Sunshine</label>
    <input type="radio" name="theme" value="moonlight" class="theme-controller-item" />
    <label class="theme-controller-label">Moonlight</label>
  </div>
</details>

Toggle Buttons

切换按钮

html

<!-- Single toggle -->
<button class="toggle-btn toggle-btn-active">Bold</button>

<!-- Toggle group -->
<div class="toggle-group">
  <button class="toggle-btn toggle-btn-active">Left</button>
  <button class="toggle-btn">Center</button>
  <button class="toggle-btn">Right</button>
</div>

html

<!-- 单个切换按钮 -->
<button class="toggle-btn toggle-btn-active">Bold</button>

<!-- 切换按钮组 -->
<div class="toggle-group">
  <button class="toggle-btn toggle-btn-active">Left</button>
  <button class="toggle-btn">Center</button>
  <button class="toggle-btn">Right</button>
</div>

Responsive Grid

响应式网格

html

<!-- Auto-fill: Fixed column size, empty space on right -->
<div class="grid grid-cols-auto-fill-48 gap-4">
  <div class="card">Item 1</div>
  <div class="card">Item 2</div>
  <div class="card">Item 3</div>
</div>

<!-- Auto-fit: Columns stretch to fill container -->
<div class="grid grid-cols-auto-fit-64 gap-4">
  <div class="card">Item 1</div>
  <div class="card">Item 2</div>
</div>

html

<!-- Auto-fill：固定列宽，右侧留空 -->
<div class="grid grid-cols-auto-fill-48 gap-4">
  <div class="card">Item 1</div>
  <div class="card">Item 2</div>
  <div class="card">Item 3</div>
</div>

<!-- Auto-fit：列宽拉伸填充容器 -->
<div class="grid grid-cols-auto-fit-64 gap-4">
  <div class="card">Item 1</div>
  <div class="card">Item 2</div>
</div>

Color System

色彩系统

Color Utilities

色彩工具类

html

<!-- Backgrounds -->
<div class="bg-primary">Primary</div>
<div class="bg-secondary">Secondary</div>
<div class="bg-tertiary">Tertiary</div>
<div class="bg-surface-container">Surface</div>

<!-- Text -->
<p class="text-primary">Primary</p>
<p class="text-on-surface">On surface</p>
<p class="text-on-surface-variant">Muted</p>

<!-- Semantic -->
<div class="bg-success text-success-content">Success</div>
<div class="bg-error text-error-content">Error</div>

html

<!-- 背景色 -->
<div class="bg-primary">Primary</div>
<div class="bg-secondary">Secondary</div>
<div class="bg-tertiary">Tertiary</div>
<div class="bg-surface-container">Surface</div>

<!-- 文字色 -->
<p class="text-primary">Primary</p>
<p class="text-on-surface">On surface</p>
<p class="text-on-surface-variant">Muted</p>

<!-- 语义色彩 -->
<div class="bg-success text-success-content">Success</div>
<div class="bg-error text-error-content">Error</div>

CSS Variables

CSS变量

css

.custom {
  background-color: var(--color-primary);
  color: var(--color-primary-content);
  border-color: var(--color-outline);
}

css

.custom {
  background-color: var(--color-primary);
  color: var(--color-primary-content);
  border-color: var(--color-outline);
}

Theme Switching

主题切换

javascript

// Switch to dark theme
document.documentElement.dataset.theme = 'moonlight';

// Switch to light theme
document.documentElement.dataset.theme = 'sunshine';

javascript

// 切换到深色主题
document.documentElement.dataset.theme = 'moonlight';

// 切换到浅色主题
document.documentElement.dataset.theme = 'sunshine';

Importing Component Styles

导入组件样式

Full Library Import

全库导入

Import all components and themes at once:

css

/* In your CSS file */
@import "tailwindcss";
@import "@duskmoon-dev/core";

一次性导入所有组件和主题：

css

/* 在CSS文件中 */
@import "tailwindcss";
@import "@duskmoon-dev/core";

Individual Component CSS Import

单个组件CSS导入

Import only the CSS you need for smaller bundle sizes:

css

/* CSS imports */
@import "@duskmoon-dev/core/components/button";
@import "@duskmoon-dev/core/components/card";
@import "@duskmoon-dev/core/components/input";
@import "@duskmoon-dev/core/components/alert";

仅导入所需组件的CSS以减小包体积：

css

/* CSS导入 */
@import "@duskmoon-dev/core/components/button";
@import "@duskmoon-dev/core/components/card";
@import "@duskmoon-dev/core/components/input";
@import "@duskmoon-dev/core/components/alert";

JavaScript/TypeScript Import

JavaScript/TypeScript导入

javascript

// Import component styles in JS/TS
import '@duskmoon-dev/core/components/button';
import '@duskmoon-dev/core/components/card';
import '@duskmoon-dev/core/components/input';

javascript

// 在JS/TS中导入组件样式
import '@duskmoon-dev/core/components/button';
import '@duskmoon-dev/core/components/card';
import '@duskmoon-dev/core/components/input';

Theme-Only Import

仅导入主题

css

/* Import specific themes */
@import "@duskmoon-dev/core/themes/sunshine";
@import "@duskmoon-dev/core/themes/moonlight";

css

/* 导入指定主题 */
@import "@duskmoon-dev/core/themes/sunshine";
@import "@duskmoon-dev/core/themes/moonlight";

Available Component Exports

可用组件导出

All components available for individual import:

Import Path	Component
`@duskmoon-dev/core/components/accordion`	Accordion
`@duskmoon-dev/core/components/alert`	Alert
`@duskmoon-dev/core/components/appbar`	App Bar
`@duskmoon-dev/core/components/autocomplete`	Autocomplete
`@duskmoon-dev/core/components/avatar`	Avatar
`@duskmoon-dev/core/components/badge`	Badge
`@duskmoon-dev/core/components/bottom-navigation`	Bottom Navigation
`@duskmoon-dev/core/components/bottomsheet`	Bottom Sheet
`@duskmoon-dev/core/components/button`	Button
`@duskmoon-dev/core/components/card`	Card
`@duskmoon-dev/core/components/cascader`	Cascader
`@duskmoon-dev/core/components/checkbox`	Checkbox
`@duskmoon-dev/core/components/chip`	Chip
`@duskmoon-dev/core/components/circle-menu`	Circle Menu
`@duskmoon-dev/core/components/code-block`	Code Block
`@duskmoon-dev/core/components/collapse`	Collapse
`@duskmoon-dev/core/components/datepicker`	Date Picker
`@duskmoon-dev/core/components/dialog`	Dialog
`@duskmoon-dev/core/components/divider`	Divider
`@duskmoon-dev/core/components/drawer`	Drawer
`@duskmoon-dev/core/components/file-upload`	File Upload
`@duskmoon-dev/core/components/form`	Form
`@duskmoon-dev/core/components/form-group`	Form Group
`@duskmoon-dev/core/components/input`	Input
`@duskmoon-dev/core/components/list`	List
`@duskmoon-dev/core/components/markdown-body`	Markdown Body
`@duskmoon-dev/core/components/modal`	Modal
`@duskmoon-dev/core/components/multi-select`	Multi-Select
`@duskmoon-dev/core/components/navigation`	Navigation (Navbar/Tabs/Menu)
`@duskmoon-dev/core/components/nested-menu`	Nested Menu
`@duskmoon-dev/core/components/otp-input`	OTP Input
`@duskmoon-dev/core/components/pin-input`	PIN Input
`@duskmoon-dev/core/components/popover`	Popover
`@duskmoon-dev/core/components/progress`	Progress
`@duskmoon-dev/core/components/radio`	Radio
`@duskmoon-dev/core/components/rating`	Rating
`@duskmoon-dev/core/components/segment-control`	Segment Control
`@duskmoon-dev/core/components/select`	Select
`@duskmoon-dev/core/components/skeleton`	Skeleton
`@duskmoon-dev/core/components/slider`	Slider
`@duskmoon-dev/core/components/snackbar`	Snackbar
`@duskmoon-dev/core/components/stepper`	Stepper
`@duskmoon-dev/core/components/switch`	Switch
`@duskmoon-dev/core/components/table`	Table
`@duskmoon-dev/core/components/textarea`	Textarea
`@duskmoon-dev/core/components/theme-controller`	Theme Controller
`@duskmoon-dev/core/components/time-input`	Time Input
`@duskmoon-dev/core/components/timeline`	Timeline
`@duskmoon-dev/core/components/toast`	Toast
`@duskmoon-dev/core/components/toggle`	Toggle
`@duskmoon-dev/core/components/tooltip`	Tooltip
`@duskmoon-dev/core/components/tree-select`	Tree Select

所有支持单独导入的组件：

导入路径	组件
`@duskmoon-dev/core/components/accordion`	Accordion
`@duskmoon-dev/core/components/alert`	Alert
`@duskmoon-dev/core/components/appbar`	App Bar
`@duskmoon-dev/core/components/autocomplete`	Autocomplete
`@duskmoon-dev/core/components/avatar`	Avatar
`@duskmoon-dev/core/components/badge`	Badge
`@duskmoon-dev/core/components/bottom-navigation`	Bottom Navigation
`@duskmoon-dev/core/components/bottomsheet`	Bottom Sheet
`@duskmoon-dev/core/components/button`	Button
`@duskmoon-dev/core/components/card`	Card
`@duskmoon-dev/core/components/cascader`	Cascader
`@duskmoon-dev/core/components/checkbox`	Checkbox
`@duskmoon-dev/core/components/chip`	Chip
`@duskmoon-dev/core/components/circle-menu`	Circle Menu
`@duskmoon-dev/core/components/code-block`	Code Block
`@duskmoon-dev/core/components/collapse`	Collapse
`@duskmoon-dev/core/components/datepicker`	Date Picker
`@duskmoon-dev/core/components/dialog`	Dialog
`@duskmoon-dev/core/components/divider`	Divider
`@duskmoon-dev/core/components/drawer`	Drawer
`@duskmoon-dev/core/components/file-upload`	File Upload
`@duskmoon-dev/core/components/form`	Form
`@duskmoon-dev/core/components/form-group`	Form Group
`@duskmoon-dev/core/components/input`	Input
`@duskmoon-dev/core/components/list`	List
`@duskmoon-dev/core/components/markdown-body`	Markdown Body
`@duskmoon-dev/core/components/modal`	Modal
`@duskmoon-dev/core/components/multi-select`	Multi-Select
`@duskmoon-dev/core/components/navigation`	Navigation (Navbar/Tabs/Menu)
`@duskmoon-dev/core/components/nested-menu`	Nested Menu
`@duskmoon-dev/core/components/otp-input`	OTP Input
`@duskmoon-dev/core/components/pin-input`	PIN Input
`@duskmoon-dev/core/components/popover`	Popover
`@duskmoon-dev/core/components/progress`	Progress
`@duskmoon-dev/core/components/radio`	Radio
`@duskmoon-dev/core/components/rating`	Rating
`@duskmoon-dev/core/components/segment-control`	Segment Control
`@duskmoon-dev/core/components/select`	Select
`@duskmoon-dev/core/components/skeleton`	Skeleton
`@duskmoon-dev/core/components/slider`	Slider
`@duskmoon-dev/core/components/snackbar`	Snackbar
`@duskmoon-dev/core/components/stepper`	Stepper
`@duskmoon-dev/core/components/switch`	Switch
`@duskmoon-dev/core/components/table`	Table
`@duskmoon-dev/core/components/textarea`	Textarea
`@duskmoon-dev/core/components/theme-controller`	Theme Controller
`@duskmoon-dev/core/components/time-input`	Time Input
`@duskmoon-dev/core/components/timeline`	Timeline
`@duskmoon-dev/core/components/toast`	Toast
`@duskmoon-dev/core/components/toggle`	Toggle
`@duskmoon-dev/core/components/tooltip`	Tooltip
`@duskmoon-dev/core/components/tree-select`	Tree Select

Usage in Web Components / Custom Elements

在Web Components/自定义元素中使用

Each component exports a named

css

export containing the CSS string:

javascript

// Import the css named export
import { css as buttonCSS } from '@duskmoon-dev/core/components/button';
import { css as cardCSS } from '@duskmoon-dev/core/components/card';
import { css as inputCSS } from '@duskmoon-dev/core/components/input';

Example usage in a custom element:

javascript

import { css as buttonCSS } from '@duskmoon-dev/core/components/button';

// Strip @layer wrapper for Shadow DOM compatibility
const coreStyles = buttonCSS.replace(/@layer\s+components\s*\{/, '').replace(/\}\s*$/, '');

class MyButton extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });

    // Add styles to shadow DOM
    const style = document.createElement('style');
    style.textContent = coreStyles;
    this.shadowRoot.appendChild(style);
  }
}

Note: The CSS is wrapped in

@layer components { }

for Tailwind CSS cascade layers. When using in Shadow DOM, strip the

@layer

wrapper as shown above.

每个组件都导出一个名为

css

的变量，包含CSS字符串：

javascript

// 导入css命名导出
import { css as buttonCSS } from '@duskmoon-dev/core/components/button';
import { css as cardCSS } from '@duskmoon-dev/core/components/card';
import { css as inputCSS } from '@duskmoon-dev/core/components/input';

自定义元素使用示例：

javascript

import { css as buttonCSS } from '@duskmoon-dev/core/components/button';

// 移除@layer包装以兼容Shadow DOM
const coreStyles = buttonCSS.replace(/@layer\s+components\s*\{/, '').replace(/\}\s*$/, '');

class MyButton extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });

    // 向Shadow DOM添加样式
    const style = document.createElement('style');
    style.textContent = coreStyles;
    this.shadowRoot.appendChild(style);
  }
}

注意：CSS被包裹在

@layer components { }

中，用于Tailwind CSS的层级优先级。在Shadow DOM中使用时，需按照上述示例移除

@layer

包装。