Cài đặt Tailwind CSS với Nuxt

Thiết lập Tailwind CSS trong dự án Nuxt.

Tạo dự án của bạn

Bắt đầu bằng cách tạo một dự án Nuxt mới nếu bạn chưa thiết lập. Cách phổ biến nhất là sử dụng Create Nuxt.

Terminal

npm create nuxt my-projectcd my-project

Cài đặt Tailwind CSS

Cài đặt @tailwindcss/vite và các peer dependencies thông qua npm.

Terminal

npm install tailwindcss @tailwindcss/vite

Cấu hình Vite Plugin

Thêm plugin @tailwindcss/vite vào cấu hình Nuxt của bạn như một Vite plugin.

nuxt.config.ts

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

Import Tailwind CSS

Tạo file ./app/assets/css/main.css và thêm @import để import Tailwind CSS.

main.css

@import "tailwindcss";

Thêm file CSS toàn cục

Thêm file ./app/assets/css/main.css vừa tạo vào mảng css trong file nuxt.config.ts của bạn.

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(),    ],  },});

Bắt đầu quá trình build

Chạy quá trình build với npm run dev.

Terminal

npm run dev

Bắt đầu sử dụng Tailwind trong dự án của bạn

Bắt đầu sử dụng các utility class của Tailwind để style nội dung của bạn.

app.vue

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