Tailwind CSS là framework CSS utility-first đang được sử dụng rộng rãi trong cộng đồng lập trình web. Bài viết này sẽ giới thiệu tổng quan Tailwind CSS cho người mới bắt đầu, từ khái niệm cơ bản, cách cài đặt đến các tính năng nổi bật và khi nào nên sử dụng.
Tailwind CSS là gì?
Tailwind CSS là framework CSS utility-first được tạo bởi Adam Wathan, ra mắt lần đầu năm 2017. Thay vì viết các lớp CSS riêng và đặt tên class mô tả như truyền thống, Tailwind cung cấp hàng trăm class đơn năng, mỗi class tương ứng với một thuộc tính CSS duy nhất. Bạn viết class trực tiếp trong markup HTML để tạo giao diện.
Ví dụ, thay vì viết class .card trong file CSS riêng, bạn dùng class=”flex items-center gap-4 rounded-lg bg-white p-6″ trực tiếp trên element HTML. Mỗi class đại diện cho một thuộc tính cụ thể như padding, border-radius hay màu nền.
Tailwind khác gì với CSS truyền thống và Bootstrap?
Với CSS truyền thống, bạn viết styles trong file .css riêng, đặt tên class mô tả mục đích của phần tử. Bootstrap là framework component, cung cấp sẵn các thành phần hoàn chỉnh như Navbar, Card, Modal với class tên mô tả như btn btn-primary. Tailwind khác hoàn toàn, nó chỉ cung cấp utility classes và không có component sẵn. Bạn tự ghép các utility classes để xây dựng giao diện theo cách riêng của mình.
Ưu điểm lớn nhất là CSS output cực nhỏ vì Tailwind chỉ sinh ra những class bạn thực sự sử dụng trong dự án. File CSS của một dự án Tailwind thường chỉ khoảng 30KB khi đóng gói, nhẹ hơn đáng kể so với CSS chung của Bootstrap.
Các khái niệm cốt lõi
Utility classes
Mỗi class tương ứng một thuộc tính CSS duy nhất. Ví dụ p-4 = padding 1rem, text-lg = cỡ chữ lớn, rounded-lg = bo góc lớn. Bạn ghép nhiều class lại với nhau để tạo kiểu phức tạp.
Thiết kế Responsive
Dùng tiền tố sm:, md:, lg:, xl:, 2xl: với chiến lược mobile-first. Ví dụ class md:w-32 chỉ áp dụng từ màn hình 768px trở lên. Có năm breakpoints chính: sm tại 640px, md tại 768px, lg tại 1024px, xl tại 1280px và 2xl tại 1536px.
Chế độ Dark Mode
Thêm tiền tố dark: như dark:bg-gray-800 để áp dụng kiểu khi người dùng bật chế độ tối. Mặc định Tailwind dùng prefers-color-scheme media query, bạn có thể override bằng class hoặc thuộc tính data trên element html.
@theme trong Tailwind v4
Phiên bản v4 chuyển sang cấu hình dựa trên CSS. Bạn dùng @theme trong file CSS để khai báo biến màu sắc và thiết kế tự động tạo utility classes tương ứng.
Directive @apply
@apply cho phép bạn inline các utility classes vào CSS custom, hữu ích khi cần override styles của thư viện bên thứ ba.
Các cách cài đặt Tailwind CSS
- CDN: Thêm script tag vào HTML, phù hợp để thử nghiệm và prototype.
- npm và PostCSS: Cài đặt package rồi cấu hình plugin trong PostCSS.
- Tailwind CLI: Dùng lệnh npx @tailwindcss/cli để quét files và sinh CSS.
- Vite plugin: Cách chính thức ở v4 với @tailwindcss/vite, tích hợp chặt chẽ với hệ sinh thái Vite.
- Framework: Next.js, React Router, SvelteKit, Nuxt, Laravel đều có hướng dẫn tích hợp chính thức trên tài liệu Tailwind.
Tailwind CSS v4 có gì mới?
Phiên bản v4 mang đến engine mới với tốc độ rebuild nhanh hơn 3.5 đến 5 lần và rebuild incremental nhanh hơn hơn 100 lần. Cấu hình chuyển sang CSS-first, bỏ file tailwind.config.js. Hỗ trợ CSS cascade layers để kiểm soát specificity tốt hơn. Container queries được hỗ trợ chính thức mà không cần plugin. Bảng màu được hiện đại hóa với gam màu sống động hơn.
Ưu điểm và nhược điểm
Ưu điểm
- CSS output nhỏ, hiệu năng load trang tốt.
- Tốc độ phát triển nhanh, không cần context-switch giữa HTML và CSS.
- Hệ thống design nhất quán với breakpoints, khoảng cách và màu sắc chuẩn hóa.
- Responsive và Dark Mode tích hợp sẵn.
- Tương thích mọi framework: React, Vue, Angular, Svelte hay HTML thuần.
Nhược điểm
- Phải ghi nhớ nhiều class names, cần thời gian làm quen với hệ thống tên.
- HTML dài hơn do attribute class chứa nhiều tên class.
- Không có component sẵn như Bootstrap, phải tự xây từ đầu.
Khi nào nên dùng Tailwind CSS?
Tailwind phù hợp với dự án mới cần prototype nhanh, team muốn kiểm soát chặt hệ thống design, các dự án React hay Next.js dùng component architecture. Không phù hợp nếu bạn làm nội dung nhiều trang giống nhau như blog CMS lớn hoặc team mới bắt đầu chưa quen utility-first approach.
Tham khảo thêm:
