Tailwind CSS là gì

Tailwind Là một CSS Framework mới dùng để phát triển UI nhanh chóng, được phát hành lần đầu tiên từ tháng 10 năm 2019 dự án ban đầu được phát triển bởi Adam Wathan. khi nói đến các framework css thì chúng ta đều nghĩ đến ngay Bootstrap, Foundation, Material Design … tuy nhiên Tailwind lại khác các framework đó ở hướng tiếp cận.

Hầu hết các framework css chọn hướng tiếp cận là “Component first” đó là hướng tiếp cận theo kiểu mì ăn liền, họ tạo ra các components sẵn giúp cho lập trình viên chỉ việc sử dụng để hoàn thiện sản phẩm nhanh chóng nhưng chính vì vậy lại mang đến nhưng nhược điểm là việc Override các component đó rất khó khăn, còn Tailwind CSSs thì sử dụng hướng tiếp cận “Utility-first Framework”,

Điểm mạnh của Tailwind

Với hướng tiếp cận “Utility-first Framework” Tailwind có những điểm mạnh là:

• Dễ dàng quản lý và sử đổi trong các dự án lớn.
• Sử dụng các class được định nghĩa sẵn có khả năng tùy biến và mở rộng rất cao.
• Các tên class được đặt dễ hiểu và thân thiện, nhìn vào class đó và có thể biết được class này nó đang style cái gì
• Sử dụng Flex nên rất dễ chia Layout
• Dễ cài đặt, dễ sử dụng, document của Tailwind rất dễ hiểu.
• Tối ưu cho môi trường di động và hỗ trợ responsive dễ dàng.
• Có khả năng trích xuất các pattern phổ biến, lặp đi lặp lại thành các thành phần tùy chỉnh, có thể sử dụng lại trong hầu hết các trường hợp mà không cần viết một dòng CSS tùy chỉnh.

Qua các điểm mạnh ở trên thì ta cũng đã có câu trả lời cho vấn đề vì sao nhiều dự án sử dụng tailwinds rồi, với những dự án cần giao diên có khả năng tùy biến và mở rộng cao thì Tailwind là một lựa chọn phù hợp

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.

cài đặt Tailwind

1. Sử dụng link trực tiếp trong html

2. Ta cài đặt qua npm

Ta tạo file styles.css, ở đây sẽ chứa các framework style dùng chỉ thị @tailwind:

Sau đó chạy lệnh npx tailwind init
Lệnh này tạo ra một tệp tailwind.config.js rỗng, trong đó chúng ta sẽ đặt các tùy chọn tùy chỉnh trong quá trình phát triển. Tệp được tạo chỉ chứa:

Bước tiếp theo là xây dựng style để sử dụng chúng:

Cuối cùng, chúng ta hãy link tệp output.css được tạo và Font Awesome trong HTML.

Sử dụng utility classes xây dựng giao diện

Ta xây dựng giao diện box chat trên bằng đoạn code này

Ở ví dụ trên ta sử dụng các class:

• (flex, flex-shrink-0, and p-6) : để kiểm soát thẻ bao bọc
• (max-w-sm and mx-auto) : để giới hạn chiều rộng và căn giữa theo chiều ngang
• (bg-white, rounded-xl, and shadow-md) css nền, viền, bóng cho thẻ
• (w-12 and h-12) : chiều rộng và cao cho ảnh
• (space-x-4) : khoảng cách giữa logo và text
• (text-xl, text-black, font-medium, etc.) : font size, text color, và font-weight
  Qua các class ví dụ trên ta thấy cách đặt tên class rất dễ hiểu, tên đúng như chức năng của nó, các bạn có thể xem qua các ví dụ dưới tương tự

Ví dụ:

Ta chỉ cần 1 đoạn code đơn giản như này là có thể tạo được giao diện trên

Hay bạn cần tạo box như trên thì sử dụng tailwind với các class có sẵn cũng rất đơn giản bằng đoạn code này

Kết bài

Qua bài này chúng ta cũng thấy được điểm mạnh điểm yếu và cách dùng cơ bản của framework css tailwind từ đó cũng có thể cân nhắc sử dụng.