Tailwind CSS: Tailwind CSS là gì? - Part 1

Viết CSS hiệu quả, dễ bảo trì và mở rộng luôn là thách thức lớn đối với các lập trình viên front-end. Bạn thường xuyên tốn nhiều thời gian cho việc viết CSS boilerplate, gặp khó khăn trong việc bảo trì code CSS, hay dễ mắc lỗi và thiếu nhất quán? Đừng lo lắng, Tailwind CSS đã có mặt để giúp bạn!

Tailwind CSS là gì ?

Tailwind CSS là một framework CSS utility-first, tương tự như Bootstrap, cung cấp một tập hợp các lớp CSS được tích hợp sẵn mà chúng ta có thể sử dụng trong ứng dụng của mình. Tuy nhiên, điểm đặc biệt của Tailwind CSS là nó cung cấp một số lượng lớn các lớp CSS với các thuộc tính và quy tắc CSS khác nhau. Thay vì sử dụng các lớp CSS được định nghĩa sẵn cho các thành phần cụ thể, Tailwind CSS tập trung vào việc cung cấp các lớp CSS cơ bản mà chúng ta có thể kết hợp để xây dựng giao diện.

Atomic CSS và Utility Classes

Để hiểu rõ Tailwind CSS, trước tiên ta cần làm quen với khái niệm Atomic CSS và CSS utility classes:

Atomic CSS: Là một phương pháp viết CSS, nơi mỗi class CSS chỉ chứa một thuộc tính CSS duy nhất và có tác dụng rất nhỏ. 

Một số libraries Atomic

• Tailwind CSS: Là thư viện Atomic CSS phổ biến nhất hiện nay, cung cấp một bộ công cụ khổng lồ gồm các class CSS cơ bản, cho phép bạn tạo ra bất kỳ giao diện nào bạn mong muốn với độ chính xác cao.
• Tachyons: Là thư viện Atomic CSS nhẹ và dễ sử dụng, với hệ thống class được đặt tên theo cách trực quan, dễ nhớ.
• Basscss: Là thư viện Atomic CSS tối giản, tập trung vào các class CSS cơ bản nhất, phù hợp
• DaisyUI: Là thư viện Atomic CSS dựa trên Bootstrap, cung cấp các class CSS tương thích với Bootstrap.

Ví dụ

.m-2 (margin: 2px)
.text-red-500 (color: red-500)
.bgr-blue { 
  background-color: #357edd; 
}
.font-weight-bold {
  font-weight: bold;
}

CSS Utility classes: Là các class CSS được định nghĩa sẵn, đại diện cho một style cụ thể. Ta có thể kết hợp nhiều utility classes để tạo nên các element phức tạp hơn

Áp dụng:

<p class="bgr-blue font-weight-bold">Some paragraph</p>

Kết quả là Some paragraph sẽ có background màu xanh với font chữ đậm.

Lợi ích của Utility-first CSS

• Tính đóng gói (Encapsulation): Với Utility-first CSS, các thuộc tính và giá trị của CSS được đóng gói gọn gàng trong các class. Điều này giúp tránh tình trạng vô tình thiếu cú pháp hoặc gây ra lỗi chồng chéo giữa các class (ví dụ, bạn xóa một thuộc tính cần thiết trong class button). Bởi vì style được định nghĩa trong class, chỉ các element HTML có class đó mới bị ảnh hưởng về mặt hiển thị. 
• Giảm thiểu viết CSS: Bạn không cần viết nhiều CSS. Thay vào đó, chỉ cần viết markup HTML và thêm các class có sẵn vào markup. Về cơ bản, bạn có thể xây dựng giao diện chỉ bằng HTML. 
• An toàn và dễ bảo trì: Nhờ tính đóng gói, việc thay đổi style của một element trở nên dễ dàng và an toàn hơn. Bạn chỉ cần thay đổi class tương ứng mà không lo ảnh hưởng đến các element khác.

Nhược điểm của Tailwind

Nhược điểm lớn nhất là khi sử dụng Tailwind thì các thẻ của chúng ta cần rất nhiều class, mỗi thuộc tính là một class khi đó code cũng sẽ rất dài và rắc rối.

Ví dụ:

Code HTML dài dòng

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded shadow-md focus:outline-none focus:shadow-outline">
  Button
</button>

Tham khảo

Giới thiệu Tailwind CSS - Framework CSS để tạo giao diện linh hoạt và nhanh chóng

Ultimate guide to building responsive UI elements with Tailwind CSS

Tổ chức CSS với OOCSS, SMACSS và BEM

DaisyUI - thư viện đẹp cho TailwindCSS