Cách cài đặt Tailwind CSS v4.1.5 với Vite + React (Hướng dẫn cập nhật 2025)

MayFest2025

Tailwind CSS phiên bản 4+ đã có một phương pháp thiết lập mới khi sử dụng cùng Vite và React. Bài viết này sẽ hướng dẫn bạn từng bước cài đặt chính thức mới nhất theo tài liệu từ Tailwind CSS.

1. Yêu cầu cần thiết

Đảm bảo rằng bạn đã cài đặt Node.js (v18 trở lên) và npm:

node -v
npm -v

2. Tạo một dự án mới với Vite + React

npm create vite@latest my-portfolio -- --template react
cd my-portfolio
npm install

3. Cài đặt Tailwind CSS

Cài đặt tailwindcss và plugin @tailwindcss/vite qua npm:

npm install tailwindcss @tailwindcss/vite

4. Cấu hình plugin Vite

Thêm plugin @tailwindcss/vite vào file cấu hình Vite (vite.config.js):

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
  plugins: [
    react(), tailwindcss(),
  ],
})

5. Import Tailwind CSS

Thêm dòng @import vào file CSS chính của bạn (ví dụ: index.css) để nạp Tailwind CSS:

@import "tailwindcss";

6. Kiểm tra

Thay thế nội dung trong App.jsx bằng đoạn mã sau:

<div className="min-h-screen flex items-center justify-center bg-black text-white text-4xl font-bold">
      Tailwind is working!
</div>

7. Khởi động quá trình build

Chạy quá trình phát triển bằng lệnh npm run dev (hoặc lệnh được cấu hình trong file package.json):

npm run dev

Cảm ơn các bạn đã theo dõi!

development