在 Nuxt 中安裝 Tailwind CSS

在 Nuxt 專案中設定 Tailwind CSS。

建立你的專案

如果你還沒有設定專案，請先建立一個新的 Nuxt 專案。最常見的方式是使用 Create Nuxt。

Terminal

npm create nuxt my-projectcd my-project

安裝 Tailwind CSS

透過 npm 安裝 @tailwindcss/vite 及其對等相依套件。

Terminal

npm install tailwindcss @tailwindcss/vite

設定 Vite 外掛

在你的 Nuxt 設定中，將 @tailwindcss/vite 外掛加入為 Vite 外掛。

nuxt.config.ts

import tailwindcss from "@tailwindcss/vite";export default defineNuxtConfig({  compatibilityDate: "2025-07-15",  devtools: { enabled: true },  vite: {    plugins: [      tailwindcss(),    ],  },});

匯入 Tailwind CSS

建立 ./app/assets/css/main.css 檔案，並加入 @import 來匯入 Tailwind CSS。

main.css

@import "tailwindcss";

全域加入 CSS 檔案

將你新建立的 ./app/assets/css/main.css 加入到你的 nuxt.config.ts 檔案中的 css 陣列。

nuxt.config.ts

import tailwindcss from "@tailwindcss/vite";export default defineNuxtConfig({  compatibilityDate: "2025-07-15",  devtools: { enabled: true },  css: ['./app/assets/css/main.css'],  vite: {    plugins: [      tailwindcss(),    ],  },});

啟動你的建置流程

使用 npm run dev 執行建置流程。

Terminal

npm run dev

開始在專案中使用 Tailwind

開始使用 Tailwind 的通用類別來設定內容樣式。

app.vue

<template>  <h1 class="text-3xl font-bold underline">    Hello world!  </h1></template>