Tailwind CSS là gì?
Tailwind CSS là một framework CSS theo triết lý “utility-first”, cung cấp hàng loạt các lớp tiện ích (utility classes) nhỏ gọn để xây dựng giao diện web trực tiếp trong file HTML, giúp lập trình viên tùy biến giao diện nhanh chóng mà không cần viết nhiều CSS tùy chỉnh, khác biệt với các framework truyền thống có sẵn các thành phần dựng sẵn như Bootstrap. Thay vì định nghĩa các component lớn, bạn chỉ cần kết hợp các lớp như flex, pt-4, text-center, bg-blue-500 để tạo kiểu.
Điểm nổi bật:
- Utility-First: Sử dụng các lớp tiện ích nhỏ gọn (ví dụ:
p-4cho padding,text-lgcho cỡ chữ) để định style trực tiếp trong HTML. - Tùy biến cao: Cho phép tùy chỉnh mọi khía cạnh thiết kế thông qua file cấu hình
tailwind.config.js, từ màu sắc, font chữ đến khoảng cách. - Responsive Design: Tích hợp sẵn các breakpoint (sm:, md:, lg:) giúp dễ dàng tạo giao diện thích ứng với nhiều kích thước màn hình (mobile-first).
- Hiệu năng tốt: Sử dụng công cụ JIT (Just-In-Time) compiler và PurgeCSS để tự động loại bỏ CSS không sử dụng, giảm kích thước file CSS cuối cùng.
- Tăng tốc độ phát triển: Giúp xây dựng giao diện nhanh hơn, dễ tái sử dụng và bảo trì hơn, hạn chế viết CSS thừa thãi.
So sánh với framework truyền thống (như Bootstrap):
- Tailwind: Cung cấp các khối xây dựng (utility classes) để bạn tự lắp ráp, linh hoạt, không có thành phần mặc định.
- Framework truyền thống: Cung cấp các component (nút, thanh điều hướng, bảng…) đã được định style sẵn, dễ dùng nhưng khó tùy chỉnh sâu.
Ví dụ:
Thay vì viết CSS riêng, bạn có thể tạo một nút bấm với màu xanh, chữ trắng, bo góc bằng cách thêm các class:<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Nhấn vào đây</button>.