專案建立

建立 Nuxt 專案

Terminal

npx nuxi init my-nuxt-app

安裝相關套件

Terminal

cd my-nuxt-app
npm install

啟動專案

Terminal

npm run dev

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

安裝 TailwindCSS 套件

安裝 TailwindCSS 4

Terminal

npm install tailwindcss @tailwindcss/vite

修改 nuxt.config.ts

nuxt.config.ts

import tailwindcss from '@tailwindcss/vite'

export default defineNuxtConfig({
  compatibilityDate: '2024-11-01',
  devtools: { enabled: true },
  vite: {
    plugins: [
      tailwindcss(),
    ]
  },
  css: ['~/assets/css/main.css']
})

新增 main.css

assets/css/main.css

@import "tailwindcss";

安裝 daisyui

Terminal

npm i -D daisyui@latest

修改 main.css

assets/css/main.css

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

調整專案結構

app.vue

<template>
  <div>
    <NuxtPage />
  </div>
</template>

pages/index.vue

<template>
  <div>
    <h1>Welcome to your Nuxt Application</h1>
  </div>
</template>