Hướng Dẫn Cài Đặt Tailwind CSS Trong Dự Án React Sử Dụng Vite

Cài đặt Tailwind CSS trong một dự án React được tạo ra bằng Vite khá đơn giản, nhưng có một số vấn đề phổ biến mà nhiều nhà phát triển gặp phải. Hướng dẫn này sẽ đưa bạn qua toàn bộ quy trình, bao gồm cách khắc phục lỗi cấu hình ES module.

Mục Tiêu Học Tập

• Cách tạo một dự án React mới với Vite
• Cài đặt Tailwind CSS và các phụ thuộc của nó
• Cấu hình Tailwind cho dự án của bạn
• Khắc phục lỗi ES module phổ biến
• Kiểm tra thiết lập của bạn

Yêu Cầu

• Cài đặt Node.js trên máy tính của bạn
• Kiến thức cơ bản về React
• Truy cập dòng lệnh/terminal

Bước 1: Tạo Một Dự Án React Mới

Đầu tiên, tạo một dự án React mới bằng cách sử dụng Vite:

npm create vite@latest my-react-app

Khi được hỏi:

• Chọn React làm framework
• Chọn JavaScript (hoặc TypeScript nếu bạn thích)

Đi đến thư mục dự án của bạn:

cd my-react-app

Cài đặt các phụ thuộc của dự án:

npm install

Bước 2: Cài Đặt Tailwind CSS

Cài đặt Tailwind CSS và các phụ thuộc của nó:

npm install -D tailwindcss@^3.4.0 postcss autoprefixer

Bước 3: Tạo Các Tệp Cấu Hình Tailwind

Tạo các tệp cấu hình Tailwind và PostCSS:

npx tailwindcss init -p

Lệnh này tạo ra hai tệp:

• tailwind.config.js
• postcss.config.js

Bước 4: Vấn Đề Về ES Module

Nếu bạn cố gắng chạy lệnh npm run dev, bạn có thể gặp lỗi sau:

Failed to load PostCSS config: [ReferenceError] module is not defined in ES module scope
This file is being treated as an ES module because it has a '.js' file extension and 
'package.json' contains "type": "module".

Tại sao điều này xảy ra?

• Dự án Vite sử dụng "type": "module" trong package.json
• Điều này khiến tất cả các tệp .js trở thành ES modules
• Nhưng các tệp cấu hình được tạo ra sử dụng cú pháp CommonJS (module.exports)
• Điều này tạo ra một xung đột!

Bước 5: Khắc Phục Các Tệp Cấu Hình

Giải pháp là đổi tên các tệp cấu hình để sử dụng phần mở rộng .cjs:

Đổi tên các tệp:

1. Đổi tên postcss.config.js thành postcss.config.cjs
2. Đổi tên tailwind.config.js thành tailwind.config.cjs

Xác minh nội dung:

postcss.config.cjs:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

tailwind.config.cjs:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Bước 6: Thêm Chỉ Thị Tailwind Vào CSS

Mở src/index.css và thay thế nội dung của nó bằng:

@tailwind base;
@tailwind components;
@tailwind utilities;

Bước 7: Nhập CSS Trong Ứng Dụng Của Bạn

Đảm bảo rằng tệp src/main.jsx nhập CSS:

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'  // Dòng này rất quan trọng!

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

Bước 8: Kiểm Tra Thiết Lập Của Bạn

Thay thế nội dung của src/App.jsx bằng thành phần thử nghiệm này:

function App() {
  return (
    <div className="min-h-screen bg-gradient-to-r from-blue-400 to-purple-500 flex items-center justify-center">
      <div className="bg-white rounded-lg shadow-xl p-8 max-w-md">
        <h1 className="text-3xl font-bold text-gray-800 mb-4">
          🎉 Tailwind CSS Đang Hoạt Động!
        </h1>
        <p className="text-gray-600 mb-6">
          Thiết lập React + Tailwind của bạn đã hoàn tất và sẵn sàng để sử dụng.
        </p>
        <button className="w-full bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition-colors">
          Bắt Đầu
        </button>
      </div>
    </div>
  )
}

export default App

Bước 9: Khởi Động Máy Chủ Phát Triển

Chạy máy chủ phát triển của bạn:

npm run dev

Truy cập http://localhost:5173 trong trình duyệt của bạn. Bạn sẽ thấy một trang được thiết kế đẹp mắt với các gradient, bóng đổ và hiệu ứng hover!

Tại Sao Phần Mở Rộng .cjs Hoạt Động

Phần mở rộng .cjs cho biết Node.js xử lý tệp như một CommonJS module, bất kể cài đặt "type": "module" trong package.json. Điều này cho phép bạn:

• Tiếp tục sử dụng cú pháp module.exports quen thuộc
• Tránh chuyển đổi ES module
• Duy trì tính tương thích với các công cụ yêu cầu cấu hình CommonJS

Giải Pháp Thay Thế: Cú Pháp ES Module

Nếu bạn muốn sử dụng ES modules, bạn có thể giữ phần mở rộng .js và chuyển đổi cú pháp:

postcss.config.js:

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

tailwind.config.js:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Vấn Đề Phổ Biến Và Giải Pháp

Vấn Đề 1: Các phong cách không áp dụng

Giải pháp: Kiểm tra rằng các đường dẫn nội dung trong tailwind.config.cjs khớp với cấu trúc tệp của bạn.

Vấn Đề 2: Tệp cấu hình không tìm thấy

Giải pháp: Đảm bảo các tệp cấu hình nằm trong thư mục gốc của dự án, không phải trong các thư mục con.

Vấn Đề 3: CSS không tải

Giải pháp: Xác minh rằng bạn đang nhập ./index.css trong tệp main.jsx của bạn.

Tóm Tắt

Dưới đây là những gì chúng ta đã hoàn thành:

1. ✅ Tạo một dự án React mới với Vite
2. ✅ Cài đặt Tailwind CSS và các phụ thuộc
3. ✅ Tạo các tệp cấu hình
4. ✅ Khắc phục xung đột ES module bằng cách sử dụng phần mở rộng .cjs
5. ✅ Thêm các chỉ thị Tailwind vào CSS
6. ✅ Kiểm tra thiết lập với một thành phần mẫu

Bước Tiếp Theo

Bây giờ Tailwind CSS đã hoạt động, bạn có thể:

• Khám phá các lớp tiện ích của Tailwind
• Tùy chỉnh chủ đề của bạn trong tailwind.config.cjs
• Thêm các plugin Tailwind
• Xây dựng các giao diện tuyệt vời với CSS tiện ích

Điều quan trọng là nhớ sử dụng các phần mở rộng .cjs cho các tệp cấu hình khi làm việc với các dự án Vite. Thay đổi đơn giản này ngăn xung đột ES module và giúp bạn nhanh chóng bắt đầu!

Chúc bạn lập trình vui vẻ! 🚀