Trong bài viết này, mình sẽ phân tích tại sao bạn nên sử dụng TailwindCSS cho dự án tiếp theo. Và liệu framework CSS mới này có thay thế được Bootstrap không nhé.
TailwindCSS là gì?
Tailwind là một framework CSS ưu tiên tiện ích (utility-first) được sử dụng để nhanh chóng xây dựng giao diện người dùng hiện đại mà không cần lo lắng về xung đột trong việc đặt tên. Tên class của tiện ích mô tả chức năng của class, chẳng hạn như đặt padding thành 4px, thì có thể đặt tên là topnav. Bạn có thể đặt tên thoải mái nhưng vẫn được quản lý cẩn thận bởi Tailwind giúp việc tạo các trang web đẹp và responsive trở nên cực kỳ đơn giản mà không cần viết một dòng CSS nào.
Dưới đây là 10 lý do hàng đầu mà mình chọn Tailwind CSS:
10 lý do bạn nên sử dụng TailwindCSS cho dự án tiếp theo
1. Tailwind tiết kiệm thời gian hơn
Các lớp tiện ích (utility classes ) của Tailwind giúp bạn khỏi đau đầu khi viết và duy trì hàng đống code CSS khổng lồ từ đầu.
Một lớp tiện ích của Tailwind tương ứng với một tập hợp nhỏ các CSS. Ví dụ:
- p-4 có nghĩa là padding: 1rem (các hậu tố số trong Tailwind thường là bội số của 0,25 rem)
- m-4 nghĩa là margin: 1rem
- text-lg có nghĩa là font-size: 1.125rem; line-height: 1,75rem
- Kết hợp tất cả lại với nhau, HTML này có kích hoạt CSS Tailwind rồi nhé
<div class="p-4 m-4 text-lg"> Hello world </div>
Tương đương với HTML cơ bản này:
<div style="padding: 1rem; margin: 1rem; font-size: 1.125rem; line-height: 1.75rem"> Hello world </div>
Với sự trợ giúp của các lớp tiện ích này, chúng ta không phải xây dựng mọi thứ lại từ đầu và có thể tạo các trang web tốt hơn trong thời gian ngắn hơn.
2. Các Lớp Tiện ích Tuân theo Nguyên tắc Trách nhiệm Đơn lẻ
Các lớp tiện ích của Tailwind được thiết kế để phục vụ một mục đích cụ thể. Ví dụ:
- w-4 có nghĩa là width: 1rem;
- bg-transparent có nghĩa là background-color: transparent;
Một số lớp tiện ích cũng đóng gói nhiều hơn 1-3 khai báo CSS cùng một lúc.
Các lớp này gần giống như các phím tắt để viết code trực tiếp với các thuộc tính style. Trong nhiều năm nay, điều này thường được coi là dài dòng đến mức khó chịu, nhưng gần đây, nhiều nhà phát triển đã lập luận rằng một khi bạn đã quen với style lớp tiện ích , bạn sẽ thấy rằng điều đó có nghĩa là các phần tử HTML của bạn không can thiệp vào nhau, điều này giúp đơn giản hóa việc gỡ lỗi.
Ví dụ: khi không có class .card và không có class .featured trên toàn trang web, thì sẽ không có chuyện gì xảy ra với:
<div class="featured card">
Tailwind CSS bao gồm hàng nghìn lớp tiện ích độc lập như vậy và bạn có thể kết hợp chúng một cách sáng tạo để xây dựng các thành phần trang web được tùy chỉnh cao, bất kể bạn đặt chúng ở đâu trên trang.
3. Tài liệu của Tailwind là Top-Notch
TailwindCSS không chỉ đơn giản code mà còn đơn giản cả tài liệu.
Đó là một nơi tuyệt vời để bắt đầu tìm hiểu về cách hoạt động của framework. Bạn có thể dễ dàng truy cập bất kỳ chủ đề nào trên trang web của họ. Tìm kiếm width sẽ đưa bạn đến hướng dẫn width, nhưng tìm kiếm w-8 cũng vậy, vì vậy việc truy cập tài liệu trở nên dễ dàng hơn, ngay cả đối với các nhà phát triển mới làm quen với các frameworks CSS.
4. Một cộng đồng lớn và đang phát triển
Đánh giá mức độ phổ biến của một frameworks trước khi chuyển sang nó luôn luôn là một ý tưởng hay. Đối với các frameworks có lượng người theo dõi vững chắc, sẽ dễ dàng hơn khi tìm thấy các nhà phát triển tuyệt vời và các cộng đồng trực tuyến hỗ trợ để giúp đỡ khi bạn gặp khó khăn.
Sự phổ biến rộng rãi của TailwindCSS trong cộng đồng nhà phát triển có nghĩa là các vấn đề tiềm ẩn có thể được giải quyết dễ dàng hơn với sự hỗ trợ của cộng đồng.
5. Không còn Media Queries
Mọi lớp tiện ích trong TailwindCSS đều có thể được áp dụng có điều kiện tại các breakpoints khác nhau, có nghĩa là chúng ta không phải tạo các tệp media query riêng biệt để làm các component responsive. Tailwind, theo mặc định, cung cấp 5 breakpoints khác nhau:
- sm: 640px
- md: 768px
- lg: 1024px
- xl: 1280px
- 2xl: 1536px
Xem ví dụ này:
<img class="w-16 md:w-32 lg:w-48" src="...">
Hình ảnh của chúng ta có chiều rộng mặc định là 4rem, chiều rộng này sẽ bị 8rem và 12rem ghi đè khi viewport phát triển đến các breakpoints md và lg, tương ứng.
Nếu các breakpoints mặc định không đủ, chúng ta cũng có thể tạo các breakpoints tùy chỉnh.
6. Không tạo các Component
Tailwind không đi kèm với các kiểu component có thể sử dụng lại như .modal hoặc .navbar, nhưng nó cho phép chúng ta tạo các class tùy chỉnh có thể sử dụng lại từ các class Tailwind khác với @apply.
Chúng ta có thể tạo một class tiện ích tùy chỉnh để tìm hiểu cách thức hoạt động trên.
.card {
@apply w-20 h-20 bg-blue-700;
}
Bây giờ chúng ta đã tạo class .card tùy chỉnh của riêng mình trong TailwindCSS và chúng ta có thể thoải mái sử dụng lại nó như thể nó là một class Tailwind giống như bất kỳ class nào khác. (Bao gồm như một phần của định nghĩa về một class khác với @apply.)
7. Loại bỏ các class không sử dụng
Để làm cho trải nghiệm phát triển của chúng ta trở nên suôn sẻ, Tailwind tạo ra hàng nghìn lớp tiện ích, hầu hết trong số đó không được sử dụng trong phiên bản sản phẩm chính thức.
Để khắc phục vấn đề này, Tailwind có tính năng loại bỏ mọi lớp tiện ích không sử dụng khỏi phiên bản sản phẩm chính thức.
Việc xóa các lớp không sử dụng sẽ làm giảm đáng kể kích thước tệp CSS được gửi đến người dùng, dẫn đến trang web được tải nhanh hơn.
8. Phong cách riêng
Giống như nhiều frameworks khác, TailwindCSS cũng có phong cách riêng. Một ví dụ là các yếu tố định cỡ được sử dụng. .m-4 có nghĩa là 1rem và m-5 có nghĩa là 1.25rem. Vậy 0,25rem ở giữa thì sao?
Chúng ta coi đây là những ý kiến hữu ích vì chúng thúc đẩy tính nhất quán trong thiết kế. Rất hiếm khi cần chi tiết hơn các tùy chọn mà chúng ta đưa ra với Tailwind. Nhưng, nếu chúng ta cần, nó có thể định cấu hình và nó chỉ là CSS, vì vậy chúng ta luôn có thể thiết lập các phong cách của riêng mình.
9. Tránh các quy tắc đặt tên
Đặt tên cho các class trong CSS là một vấn đề lớn(nghiêm túc đấy, bạn đã bao giờ tham gia một cuộc họp chỉ để thảo luận về tên class chưa? Mình thì có rồi và mình không muốn trải qua điều đó 1 lần nào nữa).
Mặc kệ có các nguyên tắc quy ước đặt tên phổ biến, như BEM, Tailwind vẫn thắng trận bằng cách loại bỏ nhu cầu viết các lớp CSS tùy chỉnh. Thường thì các lớp tiện ích của Tailwind là đủ để xây dựng web rồi.
10. Cảm giác như viết CSS
TailwindCSS giúp bạn dễ dàng tạo giao diện người dùng tuyệt vời cho cả nhà phát triển cấp cơ sở và cấp cao với sự trợ giúp của các lớp tiện ích. Như đã đề cập trong lý do 2, các tiện ích chủ yếu chỉ là một tham chiếu lớp cho một styles cụ thể. Bạn sẽ nhanh chóng cảm thấy giống như viết CSS, so với việc học một framework như Bootstrap, bao gồm học một hệ thống các components được đặt tên.
Tuy nhiên, TailwindCSS không hoàn hảo
Tailwind, giống như bất kỳ framework nào khác, nó không hoàn hảo. Vấn đề phổ biến nhất là các chuỗi dài của các lớp có thể trở nên khó đọc, ngay cả trong các trường hợp sử dụng phổ biến.
Nhưng sau khi đánh giá tổng quan, những mặt tích cực của TailwindCSS vượt trội hơn hẳn những mặt tiêu cực.
Ngoài ra, bạn cũng có thể xem thêm nhiều thiết kế CSS đẹp tại đây.
