Nuxt 4.0 專案建立

建立 Nuxt 4.0 專案

Terminal

npm create nuxt <project-name>

Nuxt 4.0 已經發佈，整個安裝方式與資料夾結構有稍微的不同。

啟動專案

Terminal

cd <project-name>
npm run dev

即可在瀏覽器開啟 http://localhost:3000

安裝 TailwindCSS

模組化安裝 TailwindCSS

Terminal

npx nuxi@latest module add tailwindcss

Nuxt 4.0 已經把 TailwindCSS 當成內建模組，所以會以模組方式安裝。

自動配置 nuxt.config.ts

nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: '2025-07-15',
  devtools: { enabled: true },
  modules: ['@nuxtjs/tailwindcss']
})

安裝成功後，會自動在 nuxt.config.ts 設定 TailwindCSS 模組。

安裝 DaisyUI

手動安裝 DaisyUI

Terminal

npm i -D daisyui@latest

DaisyUI 對於 Nuxt 來說還只是第三方套件，所以只能用手動安裝。

新增 tailwind.config.js

tailwind.config.js

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
    "./nuxt.config.{js,ts}",
    "./app.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [require('daisyui')],
};

重整專案結構

修改 app/app.vue

app/app.vue

<template>
  <NuxtPage />
</template>

重新整理一下路由的資料夾結構。

測試 DaisyUI - app/pages/index.vue

app/pages/index.vue

<template>
  <div class="p-8">
    <h1 class="text-3xl font-bold mb-4">歡迎使用 Nuxt 4 和 daisyUI！</h1>

    <button class="btn btn-primary">主要按鈕</button>
    <button class="btn btn-secondary">次要按鈕</button>

    <div class="card w-96 bg-base-100 shadow-xl mt-8">
      <figure><img src="https://img.daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.jpg" alt="Shoes" />
      </figure>
      <div class="card-body">
        <h2 class="card-title">鞋子！</h2>
        <p>如果我穿上這雙鞋，它會適合我嗎？</p>
        <div class="card-actions justify-end">
          <button class="btn btn-primary">立即購買</button>
        </div>
      </div>
    </div>
  </div>
</template>

要測試 DaisyUI 有沒有安裝成功，可以建立這個測試頁面。

完成部署

重新啟動專案

執行 npm run dev 即可看到完整的 Nuxt 4.0 + TailwindCSS + DaisyUI 專案

Nuxt 4.0 TailwindCSS DaisyUI 最新版本