Thư viện thuật ngữ / Web

Tailwind CSS là gì?

Còn gọi: tailwind, tailwindcss, utility-first css, tailwind là gì

Tailwind CSS là framework CSS theo hướng utility-first: thay vì viết lớp CSS riêng cho từng thành phần, developer ghép các lớp nhỏ có sẵn như p-4, text-lg, bg-blue-500, rounded-xl trực tiếp vào HTML.

Hiểu kỹ hơn

Tailwind phổ biến trong các dự án React, Next.js và nhiều công cụ dựng giao diện bằng AI hiện nay. Điểm liên quan nhiều nhất đến designer là Tailwind có sẵn một hệ thống thang đo: khoảng cách theo bước 0,25rem (4 px), ví dụ p-4 là 16 px; thang cỡ chữ; bảng màu nhiều sắc độ từ 50 đến 950; các mức bo góc, bóng đổ và breakpoint mặc định (sm 640, md 768, lg 1024, xl 1280 px). Nếu designer thiết kế bám theo hệ 4 hoặc 8 px và đặt tên token khớp với cấu hình Tailwind của dự án, bản code sẽ sát thiết kế hơn nhiều. Các giá trị lẻ như padding 13 px buộc developer phải viết ngoại lệ. Tailwind có thể tuỳ biến toàn bộ thang theo design system riêng.