# 1. 创建 Nuxt 项目（如尚未创建）
npx nuxi@latest init ./
 
# 2. 安装 Tailwind CSS 和 DaisyUI
npm install tailwindcss@latest @tailwindcss/vite@latest daisyui@latest
 
# 或使用 pnpm
pnpm add tailwindcss @tailwindcss/vite daisyui

// nuxt.config.ts
import tailwindcss from '@tailwindcss/vite'
 
export default defineNuxtConfig({
  vite: {
    plugins: [
      tailwindcss()
    ]
  },
  css: ['~/assets/css/main.css']
})

@import "tailwindcss";
@plugin "daisyui";

<template>
  <div class="p-8">
    <button class="btn btn-primary">DaisyUI 按钮</button>
  </div>
</template>

pnpm add daisyui-nuxt

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['daisyui-nuxt'],
  daisyui: {
    themes: ['light', 'dark', 'cupcake']
  }
})

<template>
  <div class="min-h-screen bg-base-200">
    <!-- 导航栏 -->
    <div class="navbar bg-base-100 shadow-lg">
      <div class="flex-1">
        <a class="btn btn-ghost text-xl">DaisyUI + Nuxt</a>
      </div>
      <div class="flex-none">
        <ul class="menu menu-horizontal px-1">
          <li><a>首页</a></li>
          <li><a>关于</a></li>
          <li><a>联系</a></li>
        </ul>
      </div>
    </div>
 
    <!-- 内容区域 -->
    <div class="container mx-auto p-8">
      <div class="card bg-base-100 shadow-xl">
        <div class="card-body">
          <h2 class="card-title">欢迎使用 DaisyUI</h2>
          <p>这是一个纯 CSS 的组件库，零 JavaScript 依赖</p>
          <div class="card-actions justify-end">
            <button class="btn btn-primary">开始使用</button>
            <button class="btn btn-outline">了解更多</button>
          </div>
        </div>
      </div>
    </div>
 
    <!-- 底部 -->
    <footer class="footer footer-center p-4 bg-base-300 text-base-content">
      <div>
        <p>© 2026 DaisyUI + Nuxt 示例</p>
      </div>
    </footer>
  </div>
</template>

/* DaisyUI 的按钮组件 CSS 原理 */
.btn {
  /* 基础按钮样式 */
  @apply rounded-md px-4 py-2 font-medium;
  /* 使用 CSS 变量实现主题化 */
  background-color: var(--btn-bg, transparent);
  color: var(--btn-text, var(--base-content));
  border: var(--btn-border, none);
}
 
.btn-primary {
  --btn-bg: var(--primary);
  --btn-text: var(--primary-content);
  --btn-border: var(--primary);
}
 
.btn-outline.btn-primary {
  --btn-bg: transparent;
  --btn-text: var(--primary);
  --btn-border: var(--primary);
  /* hover 时填充颜色 */
}

# 1. 创建 Nuxt 项目
npx nuxi@latest init my-app
cd my-app
 
# 2. 安装依赖
pnpm add tailwindcss @tailwindcss/vite daisyui
 
# 3. 配置并开发
pnpm dev
 
# 4. 构建
pnpm build
 
# 5. 预览
pnpm preview

/* assets/css/main.css */
@import "tailwindcss";
@plugin "daisyui";
 
/* 启用指定主题 */
@plugin "daisyui/theme" {
  name: "mytheme";
  default: false;
  prefersdark: false;
 
  color-scheme: light;
  --color-base-100: oklch(100% 0 0);
  --color-base-200: oklch(98% 0 0);
  --color-base-300: oklch(95% 0 0);
  --color-base-content: oklch(20% 0 0);
  --color-primary: oklch(70% 0.15 250);
  --color-primary-content: oklch(100% 0 0);
  --color-secondary: oklch(60% 0.15 330);
  --color-secondary-content: oklch(100% 0 0);
  --color-accent: oklch(70% 0.15 180);
  --color-accent-content: oklch(100% 0 0);
  --color-neutral: oklch(30% 0 0);
  --color-neutral-content: oklch(90% 0 0);
  --color-info: oklch(70% 0.15 250);
  --color-success: oklch(70% 0.15 150);
  --color-warning: oklch(80% 0.15 80);
  --color-error: oklch(65% 0.2 25);
  --radius-selector: 1rem;
  --radius-field: 0.5rem;
  --radius-box: 1rem;
  --border: 1px;
}

<script setup lang="ts">
const themes = ['light', 'dark', 'cupcake', 'emerald', 'corporate']
const currentTheme = ref('light')
 
function switchTheme(theme: string) {
  currentTheme.value = theme
  document.documentElement.setAttribute('data-theme', theme)
}
</script>
 
<template>
  <div>
    <select class="select select-bordered" v-model="currentTheme" @change="switchTheme(currentTheme)">
      <option v-for="theme in themes" :key="theme" :value="theme">
        {{ theme }}
      </option>
    </select>
  </div>
</template>

<script setup lang="ts">
// 需要 @nuxtjs/color-mode 模块
const colorMode = useColorMode()
 
// 同步 DaisyUI 主题与 Nuxt 颜色模式
watchEffect(() => {
  document.documentElement.setAttribute(
    'data-theme',
    colorMode.value === 'dark' ? 'dark' : 'light'
  )
})
</script>

<template>
  <!-- DaisyUI 组件类 + Tailwind 工具类 自由组合 -->
  <button class="btn btn-primary w-full md:w-auto lg:px-8">
    响应式按钮
  </button>
 
  <div class="card bg-base-100 shadow-xl w-96 hover:shadow-2xl transition-shadow">
    <div class="card-body">
      <h2 class="card-title text-2xl font-bold">
        组合 Tailwind 工具类
      </h2>
    </div>
  </div>
</template>

# GitHub Actions
name: CI
on: [push, pull_request]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 22
      - run: npm install
      - run: npm run build
      - run: npm run preview &
      - run: sleep 3 && curl -s http://localhost:3000 | grep "btn"

<!-- components/AppButton.vue -->
<template>
  <button
    :class="[
      'btn',
      `btn-${variant}`,
      `btn-${size}`,
      { 'btn-disabled': disabled }
    ]"
    :disabled="disabled"
  >
    <slot />
  </button>
</template>
 
<script setup lang="ts">
defineProps<{
  variant?: 'primary' | 'secondary' | 'accent' | 'ghost' | 'link'
  size?: 'xs' | 'sm' | 'md' | 'lg' | 'wide'
  disabled?: boolean
}>()
</script>

<!-- ✅ 推荐：封装常用布局组件 -->
<!-- components/AppLayout.vue -->
<template>
  <div class="drawer lg:drawer-open">
    <input id="drawer-toggle" type="checkbox" class="drawer-toggle" />
    <div class="drawer-content">
      <AppNavbar />
      <main class="p-4">
        <slot />
      </main>
    </div>
    <div class="drawer-side">
      <AppSidebar />
    </div>
  </div>
</template>