Tailwind CSS vs CSS Modules: Cuộc chiến Styling trong dự án lớn

Một bên là đại diện cho sự tiện lợi, tốc độ (Tailwind). Một bên là đại diện cho sự ngăn nắp, tách biệt (CSS Modules). Tôi đã lead team dùng cả hai, và đây là góc nhìn thực tế sau những lần “đập đi xây lại”.

1. Tailwind CSS: Tốc độ là vua

Cách viết:

<button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Button
</button>

Ưu điểm:

• Dev nhanh: Không phải switch qua lại giữa file .js và .css. Dòng suy nghĩ không bị ngắt quãng.
• Design System nhất quán: Dùng p-4 thì chắc chắn là 1rem. Không có chuyện ông A set 10px, ông B set 12px loạn xạ.
• Bundle size nhỏ: PurgeCSS tự động xóa class không dùng.

Nhược điểm:

• HTML xấu: Nhìn vào code JSX như một mớ bòng bong.
• Khó debug: Trong DevTools, bạn thấy cả list dài dằng dặc các class nhỏ, khó biết cái nào đang override cái nào.

2. CSS Modules: Sự sạch sẽ của người kỹ sư

Cách viết:

/* button.module.css */
.btn {
  background: blue;
  padding: 10px;
}

/* Button.jsx */
import styles from './button.module.css';

<button className={styles.btn}>Button</button>

Ưu điểm:

• Scope an toàn: Style nút bấm ở Header không bao giờ ảnh hưởng đến nút bấm ở Footer.
• HTML sạch: Class name sau khi build là unique hash, code source nhìn rất gọn.
• Dễ maintain: Tách biệt Logic và Style, đúng chuẩn “Separation of Concerns”.

Nhược điểm:

• Tên class: Lại quay về bài toán “đặt tên biến”. container, wrapper, innerWrapper… mệt mỏi.
• File nhảy: Phải mở 2 file cùng lúc để code.

Khi nào dùng cái nào?

Chọn Tailwind CSS khi:

• Team nhỏ, startup cần MVP nhanh.
• Developer fullstack (ngại viết CSS thuần).
• Dự án không quá quan trọng việc HTML nhìn phải “sạch”.

Chọn CSS Modules khi:

• Dự án Enterprise cực lớn, team FE chuyên biệt.
• Cần custom style phức tạp mà utility class khó diễn tả (animation phức tạp).
• Đang migrate từ dự án cũ (Legacy) lên, không thể đập hết CSS đi viết lại Tailwind.

Lời khuyên cá nhân

Hiện tại, xu hướng là kết hợp cả hai. Tôi thường dùng Tailwind cho layout (flex, grid, margin, padding) vì nó quá tiện. Còn các Component phức tạp (như Card sản phẩm cầu kỳ), tôi dùng CSS Modules hoặc taildwind-merge + cva (Class Variance Authority) để quản lý biến thể.

Đừng cực đoan, hãy chọn công cụ giúp team bạn code vui vẻ nhất.