CSSUtility-first là viết style bằng nhiều class nhỏ, mỗi class một thuộc tính, ngay trên HTML.
<article class="flex items-center gap-4 rounded-lg border border-zinc-200 p-4">
<img class="size-12 rounded-full" src="..." alt="">
<h3 class="text-lg font-semibold">Tiêu đề</h3>
</article>Điểm mạnh thật sự không phải "viết nhanh" mà là:
1. Không phải đặt tên — phần lớn thời gian tranh luận CSS trong team là tranh luận tên class.
2. Kích thước CSS gần như không tăng theo số trang — utility được dùng lại, chỉ có HTML dài thêm.
3. Ràng buộc vào design token — p-4, text-lg lấy từ scale định sẵn nên khó lệch hệ thống.
Nhược điểm thật: HTML dài, khó đọc khi một element có 15 class; và khi lặp lại một pattern thì phải tách component (React) hoặc @apply — không có cơ chế nào khác.
So với BEM: BEM đặt tên cho ý nghĩa (.card__title), utility mô tả hình thức (text-lg font-semibold). Sửa BEM là sửa một chỗ trong CSS; sửa utility là sửa mọi chỗ dùng trong HTML — đây là đánh đổi cốt lõi, không phải cái nào tốt hơn tuyệt đối.
Lưu ý: tưởng bundle nhỏ là do "tree-shaking". Tailwind quét nội dung file để biết class nào được dùng, nên class dựng động (` text-${color}-500 `) sẽ không được sinh ra. Phải viết đủ tên class hoặc khai báo safelist.