Tailwind CSS là gì: Utility-first CSS cho lập trình viên

Tailwind CSS là gì? Đây là một framework CSS mã nguồn mở, khác với Bootstrap hay Foundation ở cách tiếp cận: thay vì đưa sẵn một bộ class dựng sẵn cho nút, bảng, thẻ, Tailwind cung cấp hàng loạt class tiện ích (utility) nhỏ lẻ như bg-yellow-300, font-bold, flex, gap-4 để bạn tự ghép lại trực tiếp ngay trong HTML. Bài viết này đi từ lý do Tailwind ra đời, cách cài đặt phiên bản mới nhất, cú pháp utility quan trọng, đến cách dựng component tái sử dụng và những lỗi thường gặp khi mới chuyển từ CSS thuần sang.

Vì sao Tailwind CSS khác biệt so với framework CSS truyền thống

Framework CSS truyền thống định nghĩa sẵn một “ngôn ngữ thiết kế”: bạn gắn class="btn btn-primary" và nhận lại một nút có bo góc, đổ nền, khi hover đổi màu. Cách đó nhanh ở giai đoạn dựng ý tưởng, nhưng khi hệ thống lớn lên, bạn sẽ phải viết CSS tùy biến chồng lên CSS gốc rồi thêm !important để ghi đè. Đây gọi là “CSS specificity hell”.

Tailwind đảo ngược mô hình đó. Mọi quy tắc trong thư viện đều là class đơn vị, mỗi class chỉ làm đúng một việc và được tạo trực tiếp từ @media, hover:, dark: hay md: khi cần. Kết quả là bạn có toàn quyền kiểm soát giao diện mà không phải đụng tới tên class dùng chung.

Điểm mạnh thứ hai nằm ở cơ chế quét nội dung. Tailwind đọc toàn bộ file mã nguồn của bạn, phát hiện class nào thực sự được dùng rồi mới sinh CSS tương ứng. Trước đây quy trình này dựa trên PurgeCSS nên đôi khi sót class sinh động bằng chuỗi; từ phiên bản 3 trở đi, engine tích hợp sẵn và tự nhận diện cả các tên class xuất hiện trong file nội dung của dự án. Xem thêm lịch sử phát triển tại kho mã nguồn chính thức Tailwind CSS.

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

Cách phổ biến và nhẹ nhất hiện nay là dùng plugin chính thức cho Vite. Mở terminal tại thư mục dự án và chạy:

npm install tailwindcss @tailwindcss/vite

Sau đó khai báo plugin trong file vite.config.js:

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [tailwindcss()]
})

Ở phiên bản 4, bạn chỉ cần một dòng lệnh trong CSS, không còn tạo file tailwind.config.js nữa. Nội dung CSS gốc trở thành:

@import "tailwindcss";

Nếu dự án của bạn chưa dùng Vite mà vẫn muốn dùng Tailwind qua CDN để thử nhanh, Tailwind cung cấp Play CDN tại trang hướng dẫn cài đặt chính thức. Tuy nhiên Play CDN chỉ nên dùng để dựng ý tưởng, tuyệt đối không bỏ vào bản build production vì toàn bộ framework sẽ được tải về ở dạng chưa nén.

Những class utility bạn sẽ dùng mỗi ngày

Tailwind có hàng nghìn class, nhưng thực tế 90% giao diện chỉ cần nhóm dưới đây. Học thuộc nhóm này là đủ để dựng được phần lớn layout.

• Flexbox và Grid: flex, flex-col, grid, grid-cols-3, gap-4, justify-between, items-center
• Tiền tố responsive: sm:, md:, lg:, xl: áp dụng từ các mốc 640px, 768px, 1024px, 1280px trở lên
• Tiền tố trạng thái: hover:, focus-visible:, group-hover:, peer-checked: cho tương tác
• Chế độ tối: dark: kết hợp với class strategy trong cấu hình để đổi giao diện theo hệ điều hành
• Typography và khoảng cách: text-sm, text-xl, font-semibold, leading-relaxed, tracking-tight

Ví dụ một thẻ bài viết hoàn chỉnh có thể viết gọn trong một dòng:

<div class="max-w-md rounded-xl border border-slate-200 bg-white p-6 shadow-sm hover:shadow-md">

Tránh lặp lại class dài bằng @apply và component

Khi một tổ hợp class lặp lại nhiều lần, việc viết tay sẽ nhanh chóng trở nên rối. Có ba hướng xử lý, xếp theo thứ tự nên ưu tiên:

1. Trích xuất component React hoặc Vue nếu đã dùng framework. Đây là cách đúng đắn nhất vì component vừa tái sử dụng logic vừa tái sử dụng giao diện.
2. Dùng biến CSS khi chỉ khác vài giá trị: khai báo --brand-color rồi dùng bg-[var(--brand-color)]. Cách này giữ được tính utility-first.
3. Dùng @apply để gom class thành class mới trong CSS. Chỉ nên dùng cho nút hoặc thẻ dùng khắp dự án, vì @apply quá nhiều sẽ biến Tailwind trở lại thành framework theo kiểu cũ.

Cấu hình nhanh bằng file theme trong phiên bản 4

Phiên bản 4 chuyển cấu hình sang dạng CSS-first, tức bạn khai báo token thiết kế ngay trong stylesheet thay vì dùng JavaScript. Khi muốn thêm một màu thương hiệu hoặc một font mới, bạn chỉ cần khai báo trong khối @theme:

@import "tailwindcss";

@theme {
  --color-brand-500: oklch(0.62 0.19 259);
  --font-display: "Be Vietnam Pro", sans-serif;
}

Sau khi khai báo, Tailwind tự sinh ra bg-brand-500, text-brand-500, font-display mà bạn không cần viết thêm dòng nào. Toàn bộ chi tiết về hệ thống token nằm trong trang tài liệu theme của Tailwind.

Những lỗi thường gặp khi chuyển từ CSS thuần sang

• Class bị xoá khi build: nếu bạn ghép tên class bằng nối chuỗi động như "text-" + color, Tailwind không thấy trong mã nguồn nên không sinh CSS. Hãy dùng bảng tra cứu dạng object thay vì nối chuỗi.
• Chọn sai chiến lược dark mode: mặc định dùng prefers-color-scheme. Nếu bạn muốn người dùng tự bật tắt bằng công tắc, cần khai báo @custom-variant dark (&:where(.dark, .dark *));.
• HTML rối: dùng @layer components cho các class cấu trúc và @layer utilities cho utility tuỳ chỉnh, để thứ tự cascade vẫn đúng.
• Quên vô hiệu hoá class không dùng: nếu bạn lỡ tay thêm thư viện khác sinh ra class trùng tên, hãy dùng @source not "../node_modules" để thu hẹp phạm vi quét.

Tailwind CSS có phù hợp với dự án của bạn?

Nếu dự án của bạn là landing page, dashboard, form hồi sơ, trang bán hàng hay bất kỳ giao diện nào cần tốc độ dựng và đồng nhất thiết kế, Tailwind gần như chắc chắn là lựa chọn đúng. Nó đặc biệt hợp với team nhỏ vì không cần thỏa thuận lại hệ thống design system trước khi code.

Ngược lại, nếu bạn đang xây một thư viện component đóng gói lại để bán cho khách, hoặc một dự án cần tuân thủ chặt một bộ design system do bên khác định nghĩa, lúc đó việc dùng Tailwind có thể làm giảm tính tái sử dụng. Khi đó hãy cân nhắc Pico CSS hoặc Bootstrap vì chúng gần với CSS thuần hơn.

Dù chọn hướng nào, nguyên tắc quan trọng nhất vẫn là giữ giao diện tách biệt khỏi cấu trúc dữ liệu. Tailwind giúp bạn làm điều đó nhanh hơn, nhưng trách nhiệm giữ cho mã nguồn dễ đọc vẫn thuộc về bạn.