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!