@macroui/macroui

v4.3.2

Published

18 days ago

Macroui - Tailwind CSS Component Library

0High
0Medium
0Low

macroui daisyui tailwind tailwindcss tailwind css tailwind react tailwind vue tailwind plugin tailwind component component library css library

@macroui/macroui

Tailwind CSS 最流行的开源组件库 — 100% DaisyUI 兼容

🎯 MacroUI 是基于 DaisyUI 二次开发并适配中国大陆生态的 Tailwind CSS 组件库。提供 80+ 语义化 CSS 类、button、card、modal、drawer、navbar、menu、tabs、table、alert、toast、tooltip 等开箱即用的组件样式，支持 25+ 预设主题（light / dark / corporate / cyberpunk / dracula / halloween ...）。

官方网站：https://macroui.com/
组件列表：https://macroui.com/components/
安装指南：https://macroui.com/docs/install/

1. 项目简介

@macroui/macroui 是 DaisyUI 的中国版分支，完全保持 DaisyUI API 兼容，同时优化：

✅ 完整 DaisyUI API（class 名完全一致，迁移零成本）
✅ 内置 25 个开箱即用主题
✅ 支持浅色 / 深色 / 主题切换（data-theme）
✅ 纯 CSS、无运行时，零 JS 依赖
✅ 同时兼容 Tailwind CSS 3.x / PostCSS / UnoCSS
✅ 文件体积小（gzip 后 ~10KB）

适用场景

静态站点（HTML / Hugo / Jekyll / 11ty）
后台管理系统（Vue / React / Solid / Svelte）
微前端 / 嵌入式 H5
移动端 H5（与 Tailwind responsive breakpoints 配合）

2. 安装

2.1 通过 npm / pnpm / yarn 安装

# npm
npm install @macroui/macroui

# pnpm (推荐)
pnpm add @macroui/macroui

# yarn
yarn add @macroui/macroui

2.2 CDN 方式（用于静态站点）

<!-- 完整包（含所有主题） -->
<link rel="stylesheet" href="https://unpkg.com/@macroui/macroui@4/dist/full.css">

<!-- styled 版（仅语义类，不含 utility） -->
<link rel="stylesheet" href="https://unpkg.com/@macroui/macroui@4/dist/styled.css">

<!-- unstyled 版（不依赖 Tailwind） -->
<link rel="stylesheet" href="https://unpkg.com/@macroui/macroui@4/dist/unstyled.css">

3. 在 Tailwind CSS 中使用

3.1 配置 `tailwind.config.js`

// tailwind.config.js
module.exports = {
  content: [
    './src/**/*.{html,js,vue,jsx,tsx,svelte}',
    './index.html',
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require('@macroui/macroui'),
  ],
}

3.2 在 Vue 3 / Vite 项目中使用

// tailwind.config.js (或 .ts)
import macroui from '@macroui/macroui'

export default {
  content: ['./index.html', './src/**/*.{vue,js,ts}'],
  plugins: [macroui],
}

3.3 在 HTML 中直接使用类名

<button class="btn btn-primary">主要按钮</button>
<button class="btn btn-secondary">次要按钮</button>
<button class="btn btn-outline btn-error">危险按钮</button>

<div class="card w-96 bg-base-100 shadow-xl">
  <figure>
    <img src="https://img.daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.jpg" alt="Shoes" />
  </figure>
  <div class="card-body">
    <h2 class="card-title">Shoes!</h2>
    <p>If a dog chews shoes whose shoes does he choose?</p>
    <div class="card-actions justify-end">
      <button class="btn btn-primary">Buy Now</button>
    </div>
  </div>
</div>

3.4 不使用 Tailwind，直接通过 CSS 使用

如果项目中没有 Tailwind，可以直接引入预编译的 CSS：

// main.js / main.ts
import '@macroui/macroui/dist/full.css'

/* 或者在 CSS 中 */
@import '@macroui/macroui/dist/full.css';

full.css 文件已包含：Tailwind reset + Tailwind base + MacroUI 组件类 + 全部主题变量，无需额外配置。

3.5 可用 CSS 文件清单

| 文件 | 说明 | 体积 | |------|------|------| | dist/full.css | 全部样式 + reset + 主题（推荐） | ~150KB | | dist/styled.css | 仅 MacroUI 组件类，不含 utility | ~80KB | | dist/unstyled.css | 纯结构样式，未应用主题变量 | ~30KB | | dist/themes.css | 仅主题变量（与 styled 配合使用） | ~10KB | | dist/base.css | 仅 reset + root 变量 | ~5KB |

4. 主题系统

4.1 切换主题

切换主题通过修改 <html> 标签的 data-theme 属性：

<html data-theme="light">   <!-- 浅色（默认） -->
<html data-theme="dark">    <!-- 暗色 -->
<html data-theme="cupcake"> <!-- 粉彩 -->
<html data-theme="cyberpunk"> <!-- 赛博朋克 -->

JS 动态切换：

// 切换到暗色
document.documentElement.setAttribute('data-theme', 'dark')

// 切换到指定主题
function setTheme(name) {
  document.documentElement.setAttribute('data-theme', name)
  localStorage.setItem('theme', name)
}

// 初始化
const savedTheme = localStorage.getItem('theme') || 'light'
setTheme(savedTheme)

4.2 内置 25+ 主题

| 主题名 | 描述 | |--------|------| | light | 默认浅色 | | dark | 默认暗色 | | cupcake | 糖果粉彩 | | bumblebee | 黄黑条纹 | | emerald | 翠绿宝石 | | corporate | 商务灰蓝 | | synthwave | 合成波（紫粉） | | retro | 复古 8-bit | | cyberpunk | 赛博朋克（黄紫） | | valentine | 情人节粉 | | halloween | 万圣节橙紫 | | garden | 花园绿 | | forest | 森林深绿 | | aqua | 水蓝 | | lofi | Lo-Fi 灰 | | pastel | 柔和马卡龙 | | fantasy | 奇幻紫红 | | wireframe | 线框（仅黑白） | | black | 纯黑 | | luxury | 高贵金 | | dracula | 德古拉（深紫） | | cmyk | CMYK 四色 | | autumn | 秋季暖黄 | | business | 商务深蓝灰 | | acid | 酸性荧光 | | lemonade | 柠檬黄 | | night | 深夜蓝黑 | | coffee | 咖啡棕 | | winter | 冬季冷蓝 | | dim | 微暗 | | nord | 北欧冷蓝 | | sunset | 日落橙红 | | abyss | 深渊青绿 | | silk | 丝绸米色 | | caramellatte | 焦糖拿铁 |

4.3 自定义主题

/* 自定义主题 */
[data-theme="mytheme"] {
  --p: 200 50% 50%;     /* primary */
  --pc: 0 0% 100%;      /* primary content */
  --s: 150 60% 40%;     /* secondary */
  --a: 30 80% 60%;      /* accent */
  --n: 220 20% 20%;     /* neutral */
  --b1: 0 0% 100%;      /* base-100 */
  --b2: 0 0% 95%;       /* base-200 */
  --b3: 0 0% 85%;       /* base-300 */
  --bc: 220 20% 10%;    /* base content */
  /* ...更多变量 */
}

html {
  data-theme: mytheme;
}

颜色格式：H S% L%（HSL 不含 hue 单位）。

完整 CSS 变量请参见 src/themes/*.css。

5. 组件类名完整参考

5.1 Actions（动作）

`btn` — 按钮

| 类名 | 作用 | |------|------| | btn | 基础按钮 | | btn-primary | 主要按钮 | | btn-secondary | 次要按钮 | | btn-accent | 强调按钮 | | btn-info | 信息按钮 | | btn-success | 成功按钮 | | btn-warning | 警告按钮 | | btn-error | 错误按钮 | | btn-ghost | 幽灵按钮（透明） | | btn-link | 文字按钮 | | btn-outline | 边框按钮 | | btn-active | 激活状态 | | btn-disabled | 禁用状态 | | btn-glass | 玻璃态效果 | | btn-wide | 加宽按钮 | | btn-block | 100% 宽度 | | btn-circle | 圆形 | | btn-square | 方形 | | btn-xs / btn-sm / btn-md / btn-lg | 尺寸（超小/小/中/大） | | btn-sm | 小尺寸 | | btn-lg | 大尺寸 | | btn-group | 按钮组容器 | | loading | 加载中 | | no-animation | 关闭动画 |

<!-- 加载按钮 -->
<button class="btn btn-primary">
  <span class="loading loading-spinner"></span>
  loading
</button>

<!-- 渐变按钮（自定义颜色） -->
<button class="btn text-white" style="background: linear-gradient(45deg, #FF6B6B, #FFE66D);">
  渐变按钮
</button>

`dropdown` — 下拉

<details class="dropdown">
  <summary class="btn m-1">点击打开</summary>
  <ul class="menu dropdown-content bg-base-100 rounded-box z-[1] w-52 p-2 shadow">
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</details>

`modal` — 模态框

<dialog id="my_modal" class="modal">
  <div class="modal-box">
    <h3 class="text-lg font-bold">Hello!</h3>
    <p class="py-4">Press ESC key or click the button below to close</p>
    <div class="modal-action">
      <form method="dialog">
        <button class="btn">Close</button>
      </form>
    </div>
  </div>
</dialog>

`drawer` — 抽屉

<div class="drawer">
  <input id="my-drawer" type="checkbox" class="drawer-toggle" />
  <div class="drawer-content">
    <label for="my-drawer" class="btn btn-primary drawer-button">打开抽屉</label>
  </div>
  <div class="drawer-side">
    <label for="my-drawer" aria-label="close" class="drawer-overlay"></label>
    <ul class="menu bg-base-200 min-h-full w-80 p-4">
      <li><a>侧边栏内容</a></li>
    </ul>
  </div>
</div>

`swap` — 双态切换

<label class="swap swap-rotate">
  <input type="checkbox" />
  <div class="swap-on">ON</div>
  <div class="swap-off">OFF</div>
</label>

`fab` — 浮动操作按钮

<button class="btn btn-circle btn-lg btn-primary fixed bottom-8 right-8">
  +
</button>

5.2 Data Display（数据展示）

`card` — 卡片

| 类名 | 作用 | |------|------| | card | 卡片容器 | | card-body | 卡片主体 | | card-title | 标题 | | card-actions | 操作区 | | card-bordered | 带边框 | | card-compact | 紧凑布局 | | card-side | 左右布局 | | image-full | 全图覆盖 |

<div class="card card-side bg-base-100 shadow-xl">
  <figure>
    <img src="..." alt="Movie"/>
  </figure>
  <div class="card-body">
    <h2 class="card-title">New movie is released!</h2>
    <p>Click the button to watch on Jetflix app.</p>
    <div class="card-actions justify-end">
      <button class="btn btn-primary">Watch</button>
    </div>
  </div>
</div>

`badge` — 徽章

<div class="badge">默认</div>
<div class="badge badge-primary">主要</div>
<div class="badge badge-outline badge-error">错误</div>
<div class="badge badge-lg">大号</div>
<span class="indicator-item indicator-top indicator-end badge badge-secondary">99+</span>

`avatar` — 头像

| 类名 | 作用 | |------|------| | avatar | 头像容器 | | avatar-group | 头像组（叠加） | | online | 在线状态点 | | offline | 离线状态点 | | placeholder | 占位字符 |

<div class="avatar">
  <div class="w-24 rounded-full">
    <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg" />
  </div>
</div>

`stats` — 统计

<div class="stats shadow">
  <div class="stat">
    <div class="stat-title">总页面浏览</div>
    <div class="stat-value">31K</div>
    <div class="stat-desc">Jan 1st - Feb 1st</div>
  </div>
</div>

| 类名 | 说明 | |------|------| | stats | 容器（水平） | | stats-vertical | 垂直方向 | | stats-horizontal | 水平方向（默认） | | stat | 单个统计单元 | | stat-title | 标题 | | stat-value | 主数值 | | stat-desc | 描述 | | stat-figure | 装饰图标 | | stat-actions | 操作区 |

`table` — 表格

<table class="table">
  <thead>
    <tr><th>名称</th><th>类型</th><th>日期</th></tr>
  </thead>
  <tbody>
    <tr><td>Cy Ganderton</td><td>Quality Control Specialist</td><td>Blue</td></tr>
  </tbody>
</table>

| 类名 | 说明 | |------|------| | table | 基础表格 | | table-zebra | 斑马纹 | | table-pin-rows | 固定表头 | | table-pin-cols | 固定首列 | | table-sm / table-lg / table-xs / table-md | 尺寸 | | table-fixed | 等宽列 | | bg-base-200 | 行背景（结合 zebra） |

`chat` — 聊天气泡

<div class="chat chat-start">
  <div class="chat-image avatar">
    <div class="w-10 rounded-full">
      <img src="..."/>
    </div>
  </div>
  <div class="chat-header">用户A</div>
  <div class="chat-bubble">Hello!</div>
</div>

`alert` — 警告提示

<div role="alert" class="alert alert-success">
  <svg>...</svg>
  <span>文件已成功上传</span>
</div>

| 变体 | 说明 | |------|------| | alert-info | 信息 | | alert-success | 成功 | | alert-warning | 警告 | | alert-error | 错误 | | alert-outline | 边框样式 |

`skeleton` — 骨架屏

<div class="flex w-52 flex-col gap-4">
  <div class="skeleton h-32 w-full"></div>
  <div class="skeleton h-4 w-28"></div>
  <div class="skeleton h-4 w-full"></div>
  <div class="skeleton h-4 w-full"></div>
</div>

`progress` — 进度条

<progress class="progress progress-primary w-56" value="40" max="100"></progress>

| 变体 | 说明 | |------|------| | progress-primary | 主要色 | | progress-success | 成功 | | progress-error | 错误 | | progress-warning | 警告 |

`radial-progress` — 环形进度

<div class="radial-progress" style="--value:70;" role="progressbar">70%</div>

`timeline` — 时间轴

<ul class="timeline timeline-vertical">
  <li>
    <div class="timeline-start">2024</div>
    <div class="timeline-middle">
      <svg>...</svg>
    </div>
    <div class="timeline-end timeline-box">Milestone 1</div>
  </li>
</ul>

| 变体 | 说明 | |------|------| | timeline-vertical | 垂直 | | timeline-horizontal | 水平 | | timeline-compact | 紧凑 | | timeline-snap-icon | 图标对齐 |

`diff` — 对比

<figure class="diff aspect-16/9" tabindex="0">
  <div class="diff-item-1"><img src="..."/></div>
  <div class="diff-item-2"><img src="..."/></div>
  <div class="diff-resizer"></div>
</figure>

`carousel` — 轮播

<div class="carousel rounded-box">
  <div class="carousel-item">
    <img src="..." alt="Burger" />
  </div>
</div>

| 类名 | 说明 | |------|------| | carousel | 容器 | | carousel-item | 子项 | | carousel-center | 居中 | | carousel-end | 末尾对齐 | | carousel-vertical | 垂直方向 |

`hover-3d` — 3D 悬浮

<div class="hover-3d cursor-pointer">
  <div class="card">...</div>
</div>

5.3 Data Input（数据输入）

`input` — 输入框

<input type="text" placeholder="Type here" class="input input-bordered w-full max-w-xs" />

| 变体 | 说明 | |------|------| | input-bordered | 带边框 | | input-ghost | 幽灵（透明） | | input-primary | 主要色边框 | | input-secondary | 次要色边框 | | input-accent | 强调色边框 | | input-info / input-success / input-warning / input-error | 状态色 | | input-xs / input-sm / input-md / input-lg | 尺寸 | | input-disabled | 禁用 |

`textarea` — 多行文本

<textarea class="textarea textarea-bordered" placeholder="Bio"></textarea>

`select` — 下拉选择

<select class="select select-bordered w-full max-w-xs">
  <option disabled selected>Pick a movie</option>
  <option>The Godfather</option>
</select>

`checkbox` — 复选框

<input type="checkbox" checked="checked" class="checkbox" />

| 变体 | 说明 | |------|------| | checkbox-primary / checkbox-secondary / checkbox-accent | 颜色 | | checkbox-xs / checkbox-sm / checkbox-md / checkbox-lg | 尺寸 | | checkbox-disabled | 禁用 |

`radio` — 单选

<input type="radio" name="options" class="radio" checked />

`toggle` — 开关

<input type="checkbox" class="toggle toggle-primary" checked />

| 变体 | 说明 | |------|------| | toggle-primary / toggle-success / toggle-error / toggle-warning | 颜色 | | toggle-xs / toggle-sm / toggle-md / toggle-lg | 尺寸 |

`range` — 滑块

<input type="range" min="0" max="100" value="40" class="range range-primary" />

`file-input` — 文件上传

<input type="file" class="file-input file-input-bordered w-full max-w-xs" />

`rating` — 评分

<div class="rating">
  <input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" />
</div>

`validator` — 表单验证

<input type="text" class="input validator" required minlength="8" />
<p class="validator-hint">至少 8 个字符</p>

5.4 Layout（布局）

`drawer` — 抽屉布局

参见 5.1。

`hero` — 主视觉

<div class="hero min-h-screen bg-base-200">
  <div class="hero-content text-center">
    <div class="max-w-md">
      <h1 class="text-5xl font-bold">Hello there</h1>
      <p class="py-6">...</p>
      <button class="btn btn-primary">Get Started</button>
    </div>
  </div>
</div>

`navbar` — 导航栏

<div class="navbar bg-base-100">
  <div class="navbar-start">
    <a class="btn btn-ghost text-xl">macroui</a>
  </div>
  <div class="navbar-center">
    <ul class="menu menu-horizontal">...</ul>
  </div>
  <div class="navbar-end">
    <button class="btn">登录</button>
  </div>
</div>

`footer` — 页脚

<footer class="footer p-10 bg-base-200 text-base-content">
  <nav>
    <h6 class="footer-title">服务</h6>
    <a class="link link-hover">设计</a>
    <a class="link link-hover">营销</a>
  </nav>
</footer>

`mockup` — 设备外观模拟

<div class="mockup-window border bg-base-300">
  <div class="flex justify-center px-4 py-16">内容</div>
</div>

<div class="mockup-browser">...</div>
<div class="mockup-code">...</div>
<div class="mockup-phone">...</div>

`indicator` — 指示器

<div class="indicator">
  <span class="indicator-item badge badge-primary">新</span>
  <button class="btn">收件箱</button>
</div>

| 位置 | 类名 | |------|------| | 顶部 | indicator-top | | 中部 | indicator-middle | | 底部 | indicator-bottom | | 左 | indicator-start | | 中 | indicator-center | | 右 | indicator-end |

5.5 Navigation（导航）

`menu` — 菜单

| 类名 | 说明 | |------|------| | menu | 菜单容器 | | menu-vertical | 垂直菜单 | | menu-horizontal | 水平菜单 | | menu-title | 菜单标题 | | menu-disabled | 禁用项 | | menu-active | 激活项 | | menu-focus | 焦点项 | | menu-dropdown | 下拉菜单 | | menu-lg / menu-sm / menu-xs | 尺寸 |

<ul class="menu bg-base-200 rounded-box w-56">
  <li><a>Item 1</a></li>
  <li><a>Item 2</a></li>
</ul>

`tabs` — 选项卡

<div role="tablist" class="tabs tabs-lifted">
  <a role="tab" class="tab">Tab 1</a>
  <a role="tab" class="tab tab-active">Tab 2</a>
</div>

| 变体 | 说明 | |------|------| | tabs-bordered | 边框型 | | tabs-lifted | 浮起型 | | tabs-boxed | 框型 | | tab-active | 激活状态 | | tab-disabled | 禁用状态 |

`steps` — 步骤条

<ul class="steps">
  <li class="step step-primary">注册</li>
  <li class="step step-primary">验证</li>
  <li class="step">完成</li>
</ul>

| 变体 | 说明 | |------|------| | steps-vertical | 垂直 | | steps-horizontal | 水平（默认） | | step-primary / step-success | 状态 | | step-error | 错误状态 |

`breadcrumbs` — 面包屑

<div class="breadcrumbs text-sm">
  <ul>
    <li><a>首页</a></li>
    <li><a>文档</a></li>
    <li>当前页</li>
  </ul>
</div>

`pagination` — 分页

通常结合 Tailwind 实用类自行实现：

<div class="join">
  <button class="join-item btn">«</button>
  <button class="join-item btn btn-active">1</button>
  <button class="join-item btn">2</button>
  <button class="join-item btn">»</button>
</div>

5.6 Feedback（反馈）

`alert` — 警告提示

参见 5.2。

`toast` — 提示气泡

<div class="toast">
  <div class="alert alert-info">
    <span>新消息到达</span>
  </div>
</div>

<div class="toast toast-top toast-end">...</div>
<div class="toast toast-bottom toast-center">...</div>

| 位置 | 类名 | |------|------| | 顶部 | toast-top | | 底部 | toast-bottom | | 中 | toast-middle | | 开始 | toast-start | | 居中 | toast-center | | 末尾 | toast-end |

`tooltip` — 悬浮提示

<div class="tooltip" data-tip="hello">
  <button class="btn">悬停</button>
</div>

<div class="tooltip tooltip-open tooltip-primary">
  <button class="btn">强制显示</button>
</div>

| 变体 | 说明 | |------|------| | tooltip-primary / tooltip-secondary / tooltip-accent | 颜色 | | tooltip-info / tooltip-success / tooltip-warning / tooltip-error | 状态色 | | tooltip-open | 强制显示 | | tooltip-top / tooltip-bottom / tooltip-left / tooltip-right | 位置 |

`loading` — 加载中

| 类名 | 说明 | |------|------| | loading | 基础加载 | | loading-spinner | 圆形旋转 | | loading-dots | 三点 | | loading-ring | 圆环 | | loading-ball | 弹球 | | loading-bars | 跳杆 | | loading-infinity | 横 8 | | loading-xs / loading-sm / loading-md / loading-lg | 尺寸 |

<span class="loading loading-spinner loading-lg text-primary"></span>

5.7 Mockups（设备模拟）

参见 5.4 mockup。

5.8 其他实用类

`kbd` — 键盘按键

<kbd class="kbd kbd-sm">Ctrl</kbd>
<kbd class="kbd kbd-lg">Shift</kbd>

| 变体 | 说明 | |------|------| | kbd-xs / kbd-sm / kbd-md / kbd-lg | 尺寸 |

`divider` — 分割线

<div class="divider">或</div>
<div class="divider divider-horizontal">或</div>

| 变体 | 说明 | |------|------| | divider-vertical | 垂直 | | divider-horizontal | 水平（默认） | | divider-neutral / divider-primary | 颜色 | | divider-start / divider-end | 对齐 |

`field` — 表单字段

<input type="text" class="input field" placeholder="输入" />

6. 工具类参考

6.1 glass — 玻璃模糊

<div class="glass">玻璃模糊效果</div>
<a class="glass btn">玻璃按钮</a>

6.2 join — 拼接

将多个元素拼为一个连续组：

<div class="join">
  <button class="join-item btn">1</button>
  <button class="join-item btn btn-active">2</button>
  <button class="join-item btn">3</button>
</div>

6.3 radius — 圆角

| 类名 | 说明 | |------|------| | rounded-box | 主题圆角变量 | | rounded-btn | 按钮圆角变量 | | rounded-badge | 徽章圆角变量 | | rounded-full | 圆形 |

7. JS API

@macroui/macroui 本质是 Tailwind CSS Plugin，没有运行时 JS，但提供以下工具方法用于 Node 端：

7.1 主入口

import macroui from '@macroui/macroui'
// 或解构
import { createPlugin, themes, colorNames } from '@macroui/macroui'

7.2 createPlugin — 自行构建 CSS

import { createPlugin } from '@macroui/macroui'

const plugin = createPlugin({
  themes: ['light', 'dark'],
  exclude: ['input', 'select'],   // 排除的组件
  prefix: '',                     // 类名前缀
  logs: false,                    // 是否打印日志
})

7.3 themes — 主题清单

import { themes } from '@macroui/macroui'

console.log(themes) // ['light', 'dark', 'cupcake', ...]

7.4 colorNames — 颜色变量名

import { colorNames } from '@macroui/macroui'

console.log(colorNames)
// ['primary', 'secondary', 'accent', 'neutral', 'base-100', 'base-200', 'base-300', 'info', 'success', 'warning', 'error']

7.5 主题变量应用

import { themeDefaults } from '@macroui/macroui'

console.log(themeDefaults.light)
/* 输出：
{
  "color-scheme": "light",
  "primary": "#491EFF",
  "secondary": "#D926AA",
  ...
}
*/

8. 与 Vue / React / Angular 集成

8.1 在 Vue 3 项目中

参见 @macroui/macroui-vue 文档：它已经将 MacroUI 类名封装为 Element Plus 风格的组件库。

如果你不想用组件库，也可以直接使用类名：

<template>
  <button class="btn btn-primary">按钮</button>
</template>

8.2 在 React 项目中

export default function App() {
  return <button className="btn btn-primary">按钮</button>
}

8.3 在 Angular 项目中

<button class="btn btn-primary">按钮</button>

8.4 在纯 HTML 中

<!DOCTYPE html>
<html data-theme="light">
<head>
<link rel="stylesheet" href="https://unpkg.com/@macroui/macroui@4/dist/full.css">
</head>
<body>
  <button class="btn btn-primary">按钮</button>
</body>
</html>

9. 自定义主题

9.1 在 Tailwind 配置中

// tailwind.config.js
module.exports = {
  plugins: [
    require('@macroui/macroui'),
  ],
  daisyui: {
    themes: [
      {
        mytheme: {
          primary: '#a991f7',
          secondary: '#f6d860',
          accent: '#37cdbe',
          neutral: '#3d4451',
          'base-100': '#ffffff',
        },
      },
    ],
  },
}

9.2 直接使用 CSS 变量

[data-theme="mytheme"] {
  --p: 262 67% 78%;     /* primary - hsl */
  --pc: 0 0% 100%;      /* primary content */
  --s: 50 89% 67%;      /* secondary */
  --sc: 0 0% 15%;       /* secondary content */
  --a: 174 65% 56%;     /* accent */
  --ac: 0 0% 15%;       /* accent content */
  --n: 222 14% 28%;     /* neutral */
  --nc: 0 0% 100%;      /* neutral content */
  --b1: 0 0% 100%;      /* base-100 */
  --b2: 0 0% 95%;       /* base-200 */
  --b3: 0 0% 85%;       /* base-300 */
  --bc: 222 14% 10%;    /* base content */
  --in: 198 93% 60%;    /* info */
  --inc: 0 0% 100%;     /* info content */
  --su: 158 64% 52%;    /* success */
  --suc: 0 0% 100%;     /* success content */
  --wa: 38 92% 50%;     /* warning */
  --wac: 0 0% 15%;      /* warning content */
  --er: 0 91% 71%;      /* error */
  --erc: 0 0% 15%;      /* error content */
  --rounded-box: 1rem;
  --rounded-btn: 0.5rem;
  --rounded-badge: 1.9rem;
  --animation-btn: 0.25s;
  --animation-input: 0.2s;
  --btn-text-case: none;
  --tab-radius: 0.5rem;
}

9.3 暗黑模式自动切换

<html data-theme="light">
  <head>
    <script>
      // 在页面加载前应用，避免 FOUC
      const theme = localStorage.getItem('theme') ||
        (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
      document.documentElement.setAttribute('data-theme', theme)
    </script>
  </head>
</html>

10. 浏览器支持

| 浏览器 | 版本 | |--------|------| | Chrome / Edge | 最近 2 年 | | Firefox | 最近 2 年 | | Safari | 14+ | | iOS Safari | 14+ | | Android Chrome | 90+ | | IE | ❌ 不支持 |

依赖：CSS Variables、CSS Grid、gap、aspect-ratio。

11. 开发与构建

11.1 本地构建

# 克隆仓库
git clone https://github.com/macroui/macroui.git
cd macroui

# 不需要安装依赖（纯 CSS 项目）

# 构建
node build.js

构建产物：

dist/full.css
dist/styled.css
dist/unstyled.css
dist/themes.css
dist/base.css

11.2 添加新组件

在 src/components/<name>.css 创建样式
在 src/components/index.css 中 @plugin "<name>"
在 src/utilities/ 中补充工具类（可选）
运行 node build.js

11.3 添加新主题

在 src/themes/<name>.css 创建主题
添加到 functions/themeOrder.js
重新构建

11.4 NPM 发布

# 1. 确认登录
npm whoami

# 2. 修改 package.json 中的 version

# 3. 构建
node build.js

# 4. 发布
npm publish --access public

12. 常见问题

Q1: 样式不生效？

✅ 检查 Tailwind content 配置是否覆盖了所有使用类名的文件
✅ 确认 data-theme 已设置
✅ 检查自定义类前缀（prefix 配置）
✅ PurgeCSS 是否误删了动态类名

Q2: 与 Tailwind 类名冲突？

将 MacroUI 插件放在 Tailwind 默认 plugins 之前：

plugins: [
  require('@macroui/macroui'),
  require('@tailwindcss/forms'),  // 其它插件放后面
],

Q3: 如何按需引入？

// tailwind.config.js
plugins: [
  require('@macroui/macroui'),
],
daisyui: {
  themes: ['light'],
  base: true,
  styled: true,
  utils: true,
  logs: false,
}

Q4: 怎么扩展主题？

在 tailwind.config.js 的 daisyui.themes 中以对象形式声明，即可添加自定义主题。

Q5: 暗色模式？

使用 data-theme="dark" 切换即可。

13. 项目结构

macroui/
├── src/
│   ├── base/                    # 全局样式（reset, scrollbar, root）
│   │   ├── properties.css
│   │   ├── reset.css
│   │   ├── rootcolor.css
│   │   ├── rootscrollgutter.css
│   │   ├── rootscrolllock.css
│   │   ├── scrollbar.css
│   │   └── svg.css
│   ├── components/              # 60+ 组件样式
│   │   ├── alert.css
│   │   ├── button.css
│   │   ├── card.css
│   │   ├── modal.css
│   │   └── ...
│   ├── themes/                  # 35+ 主题
│   │   ├── light.css
│   │   ├── dark.css
│   │   └── ...
│   ├── utilities/               # utility 工具类
│   │   ├── glass.css
│   │   ├── join.css
│   │   └── radius.css
│   ├── theming/                 # 主题工具
│   │   ├── functions.js
│   │   ├── colorNames.js
│   │   ├── themes.js
│   │   └── index.js
│   └── lib/                     # 构建相关 lib
├── functions/                   # Node 端构建函数
│   ├── createPlugin.js
│   ├── generatePlugins.js
│   ├── generateThemes.js
│   ├── generateRawStyles.js
│   ├── packCss.js
│   └── ...
├── dist/                        # 构建产物
│   ├── full.css
│   ├── styled.css
│   ├── unstyled.css
│   ├── themes.css
│   ├── base.css
│   └── index.js
├── build.js                     # 构建入口
├── index.js                     # 入口
├── index.d.ts                   # TS 类型
└── package.json

14. 许可证

MIT License

联系方式：[email protected]

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@macroui/macroui

目录

1. 项目简介

适用场景

2. 安装

2.1 通过 npm / pnpm / yarn 安装

2.2 CDN 方式（用于静态站点）

3. 在 Tailwind CSS 中使用

3.1 配置 tailwind.config.js

3.2 在 Vue 3 / Vite 项目中使用

3.3 在 HTML 中直接使用类名

3.4 不使用 Tailwind，直接通过 CSS 使用

3.5 可用 CSS 文件清单

4. 主题系统

4.1 切换主题

4.2 内置 25+ 主题

4.3 自定义主题

5. 组件类名完整参考

5.1 Actions（动作）

btn — 按钮

dropdown — 下拉

modal — 模态框

drawer — 抽屉

swap — 双态切换

fab — 浮动操作按钮

5.2 Data Display（数据展示）

card — 卡片

badge — 徽章

avatar — 头像

stats — 统计

table — 表格

chat — 聊天气泡

alert — 警告提示

skeleton — 骨架屏

progress — 进度条

radial-progress — 环形进度

timeline — 时间轴

diff — 对比

carousel — 轮播

hover-3d — 3D 悬浮

5.3 Data Input（数据输入）

input — 输入框

textarea — 多行文本

select — 下拉选择

checkbox — 复选框

radio — 单选

toggle — 开关

range — 滑块

file-input — 文件上传

rating — 评分

validator — 表单验证

5.4 Layout（布局）

drawer — 抽屉布局

hero — 主视觉

navbar — 导航栏

footer — 页脚

mockup — 设备外观模拟

indicator — 指示器

5.5 Navigation（导航）

menu — 菜单

tabs — 选项卡

steps — 步骤条

breadcrumbs — 面包屑

pagination — 分页

5.6 Feedback（反馈）

alert — 警告提示

toast — 提示气泡

tooltip — 悬浮提示

loading — 加载中

5.7 Mockups（设备模拟）

5.8 其他实用类

kbd — 键盘按键

divider — 分割线

field — 表单字段

3.1 配置 `tailwind.config.js`

`btn` — 按钮

`dropdown` — 下拉

`modal` — 模态框

`drawer` — 抽屉

`swap` — 双态切换

`fab` — 浮动操作按钮

`card` — 卡片

`badge` — 徽章

`avatar` — 头像

`stats` — 统计

`table` — 表格

`chat` — 聊天气泡

`alert` — 警告提示

`skeleton` — 骨架屏

`progress` — 进度条

`radial-progress` — 环形进度

`timeline` — 时间轴

`diff` — 对比

`carousel` — 轮播

`hover-3d` — 3D 悬浮

`input` — 输入框

`textarea` — 多行文本

`select` — 下拉选择

`checkbox` — 复选框

`radio` — 单选

`toggle` — 开关

`range` — 滑块

`file-input` — 文件上传

`rating` — 评分

`validator` — 表单验证

`drawer` — 抽屉布局

`hero` — 主视觉

`navbar` — 导航栏

`footer` — 页脚

`mockup` — 设备外观模拟

`indicator` — 指示器

`menu` — 菜单

`tabs` — 选项卡

`steps` — 步骤条

`breadcrumbs` — 面包屑

`pagination` — 分页

`alert` — 警告提示

`toast` — 提示气泡

`tooltip` — 悬浮提示

`loading` — 加载中

`kbd` — 键盘按键

`divider` — 分割线

`field` — 表单字段