Tailwindcss? Tôi sẽ vượt qua

Gần đây, tôi đã sử dụng Tailwindcss trong một dự án và bạn biết gì không? Đó là một kinh nghiệm mở mang tầm mắt, để nói rằng ít nhất.

Một số bạn có thể thắc mắc: Tailwindcss là gì?

Tailwind CSS nổi bật là thư viện CSS phát triển nhanh nhất cho đến nay. Nó đã nhanh chóng trở thành một công cụ thiết yếu cho các nhà phát triển front-end. Nhiều nhà phát triển giao diện người dùng đang sử dụng nó trong các dự án quy mô lớn, gặp phải các sự cố tối thiểu. Không thể phủ nhận những cải tiến của nó đối với việc phát triển và thiết kế trang web và ứng dụng web.

Vì vậy, vấn đề là gì? Tại sao tiêu đề lại ghi là '“ Tailwindcss? Không, cảm ơn ”?

Tiêu đề này gợi ý rằng có thể có những trường hợp Tailwind CSS có thể không phải là lựa chọn tối ưu cho các dự án của bạn, mặc dù nó rất xuất sắc. Tại sao điều này có thể được? Có một câu trả lời. Tuy nhiên, trước khi đi sâu vào giải thích, chúng ta hãy thiết lập nền tảng cho việc kiểm tra công nghệ này.

Có chuyện gì với tất cả các CSS?

Trước khi có thể tìm hiểu về Tailwindcss và những điểm phức tạp trong quá trình phát triển của nó, chúng ta phải đáp ứng một số điều kiện tiên quyết.

CSS là gì?

CSS là viết tắt của Cascading Style Sheets. Định nghĩa tốt nhất cho CSS theo ý kiến của tôi đến từ techterms.com

“CSS là ngôn ngữ biểu định kiểu được sử dụng để định dạng nội dung trong các trang web HTML. Biểu định kiểu CSS có thể xác định giao diện và định dạng của văn bản, bảng và các thành phần khác riêng biệt với chính nội dung. Các kiểu có thể được tìm thấy trong tệp HTML của trang web hoặc trong một tài liệu riêng biệt được tham chiếu bởi nhiều trang web”.

Nói không quá nhiều: CSS là ngôn ngữ tạo kiểu. Bạn sử dụng CSS trên các phần tử HTML để làm cho trang web hoặc ứng dụng web của bạn trông đẹp mắt.

Tailwindcss là gì?

Theo lời của chính nhóm Tailwindcss , Tailwindcss là “ Khung CSS ưu tiên tiện ích được đóng gói với các lớp như flex , pt-4 , text-center và rotate-90 có thể được soạn để tạo bất kỳ thiết kế nào, trực tiếp trong phần đánh dấu của bạn ”.

Về cơ bản, điều này có nghĩa là tailwind CSS sử dụng các quy trình và hoạt động CSS gốc, sau đó làm cho chúng đơn giản hơn để thực hiện và triển khai.

Chúng ta đã thảo luận về kiến thức cơ bản về CSS và Tailwind CSS. Bây giờ, hãy tìm hiểu sâu hơn và xem xét cách Tailwind CSS hoạt động trong thực tế, cùng với các đối tác CSS tương ứng. Quá trình khám phá này cuối cùng sẽ đưa chúng ta đến kết luận mà tôi đã đạt được trong dự án liên quan đến CSS của Tailwind.

Kết luận của tôi là Tailwind CSS phù hợp nhất cho các dự án giao diện người dùng lớn hơn và phức tạp hơn. Tuy nhiên, lựa chọn mặc định cho hầu hết các trường hợp vẫn phải là CSS "vanilla". Nói cách khác, việc sử dụng CSS ở dạng tinh khiết nhất thường có lợi hơn cho hầu hết các cá nhân và tình huống so với bất kỳ thư viện bổ sung nào, có thể là Tailwind CSS hoặc các thư viện khác.

Sự khác biệt giữa CSS và Tailwindcss

Tailwindcss trông như thế nào? Hãy so sánh bằng cách tạo CSS vanilla tương đương và sau đó là Tailwindcss tương đương.

Hãy phá vỡ những gì đang xảy ra trong văn bản trên. Đó là một đoạn trích HTML 5 và chúng tôi đang xây dựng một nút.

Để tạo nút, chúng tôi thiết lập nút thông qua “ div ” - về cơ bản là các vùng chứa nhỏ để nhập nội dung nhằm thay đổi trang web hoặc ứng dụng web của chúng tôi. Chúng tôi cung cấp cho mỗi div một “ lớp ” riêng để chúng tôi có thể tham chiếu phần tử cụ thể đó sau này trong tệp CSS riêng biệt của chúng tôi. Mặc dù vậy, bạn cũng có thể cung cấp cho các div “ id ” của riêng họ. Bạn có thể thực hiện các thay đổi CSS “ trong dòng ”, nghĩa là bạn có thể đặt CSS trực tiếp vào tệp HTML nhưng hầu hết có xu hướng tránh điều đó vì lợi ích của tổ chức.

Trong tệp CSS, mã của chúng tôi để chỉnh sửa nút trông như thế nào?

Trong đoạn mã trên, chúng ta đang tương tác với lớp nút trong đoạn trích HTML. Cách bạn làm cho tệp CSS của mình nhận biết các lớp HTML của bạn bằng một dấu chấm ở đầu tên lớp. Bên dưới đó, theo thứ tự, chúng tôi căn chỉnh nút vào giữa div với “ align-items ”. Bên dưới mục căn chỉnh là “ clip nền ” xác định khoảng cách “ màu nền ” sẽ kéo dài và không kéo dài. “ Đường viền ” là độ dày của các cạnh của nút và bán kính đường viền là độ cong của các cạnh. Tất cả những gì chúng tôi vừa đề cập góp phần phát triển phong cách nút. Như chúng ta có thể thấy, các kiểu CSS ban đầu có vẻ đủ đơn giản. Tailwindcss sẽ xử lý trường hợp tương tự như thế nào?

Đợi đã, cái gì? Có phải chúng tôi vừa đặt mã trông CSS vào một tệp HTML không? Vâng chúng tôi đã làm. Nội dung bạn đang xem tương đương với các ví dụ mã trước đó trong Tailwindcss. Đây thực sự là một trong những thuộc tính độc đáo hơn của Tailwindcss. Khi sử dụng Tailwindcss, bạn không đặt mã CSS riêng của mình vào một tệp khác. Tất cả mã Tailwindcss của bạn sẽ được chuyển trực tiếp vào tệp HTML của bạn. Như chúng tôi đã nói trước đây, các nhà phát triển thường tránh viết mã CSS nội tuyến . Với Tailwindcss mã hóa nội tuyến không còn thực sự là một tùy chọn nữa, mà nó gần như là cần thiết. Tailwindcss được triển khai đầy đủ thông qua nhận dạng lớp .

Bây giờ, đoạn mã trên làm gì? nó thực hiện chính xác những gì mã CSS ban đầu thực hiện, mặc dù hơi khác một chút.

Hãy xem xét lại CSS thông thường so với đối tác Tailwindcss.

Trong hình trên, chúng ta đang ở trong một tài liệu HTML5 đang nhập hình ảnh sô cô la dưới lớp “ card-img ”. Hãy để chúng tôi xem CSS tương ứng trông như thế nào.

Mã CSS ở trên tương tự như mã cuối cùng. Không cần ngoại suy sâu nhiều. Chúng tôi đang xác định diện mạo của thẻ sô cô la. Bây giờ chúng ta hãy xem biến thể Tailwindcss thú vị hơn nhiều.

Đoạn mã trên tương đương với Tailwindcss. Nó đơn giản hơn nhiều và thanh lịch hơn nhưng đòi hỏi nhiều nỗ lực hơn để biết ý nghĩa của mọi thứ và cách định vị các câu lệnh. Vì vậy, đó có phải là một lợi thế mà nó có so với CSS truyền thống không?

Bản chất của Tailwindcss khiến nó rất lộn xộn. Tất cả mã của bạn, cả HTML và CSS, sẽ nằm trong một tệp và sẽ dài và có vẻ đông đúc. Điều này gây khó khăn cho việc phát triển.

Nhược điểm chính của Tailwindcss là gì?

• Đường cong học tập dốc cần thời gian để làm quen.
• Phải tạo các thành phần lớp tùy chỉnh. (Điều này có thể bổ sung rất nhiều cho một dự án dài hạn).
• Khó hiểu vì HTML và kiểu dáng được trộn lẫn

Ưu điểm chính của nó là gì?

• tùy biến cao

• Phát triển nhanh hơn

• Từ ngữ và mẫu nhất quán bất kể nội dung nào được thêm vào hoặc chỉnh sửa.

  
  

Chúng ta đã xem các ví dụ về Tailwindcss và bây giờ chúng ta đã biết những ưu điểm và nhược điểm chính. Nhưng, nó phổ biến như thế nào?

Nó đã được thông qua và phổ biến rộng rãi giữa các nhà phát triển cũ và mới.

Vivian Guillen của tailwindweekly.com cho biết Tailwindcss đã đạt được 4,5 triệu lượt tải xuống hàng tuần kể từ ngày 19 tháng 11 năm 2022. Khi tôi viết bài này, nếu bạn truy cập npmjs.com và tìm kiếm Tailwindcss thì nó có 336 triệu lượt tải xuống. Kể từ khi phát hành cách đây 5 năm, trung bình có 184.110 lượt tải xuống mỗi ngày. Một số lượng đáng kinh ngạc của tải về.

Kết thúc trên Tailwind

Trước đó, ở phần đầu của phần này, tôi đã viết, “ Có thể sẽ có lúc hoặc nhiều lúc Tailwindcss không phải là giải pháp tối ưu cho các dự án của bạn”. Tại sao tôi viết điều này? và nó tương quan như thế nào với tiêu đề? “Taiwindcss? Tôi sẽ vượt qua ".

Tailwindcss phổ biến trên toàn cầu đối với hầu hết các nhà phát triển giao diện người dùng, nó có vẻ dễ triển khai hơn CSS truyền thống và nó cung cấp nhiều khả năng tùy chỉnh hơn so với các công nghệ khác cùng loại. Heck, việc tôi sử dụng nó thậm chí còn truyền cảm hứng cho chính bài viết này. Vậy tại sao tôi vẫn nghi ngờ nó? Bởi vì tôi đã sử dụng nó tất nhiên .

Tailwindcss tốt như mọi người tuyên bố và hơn thế nữa. Tương tự như vậy, mọi thứ đều tồi tệ như mọi người cho rằng nó cũng vậy. Bản chất của Tailwindcss khiến nó trở nên phức tạp để hoạt động trong các dự án ngắn hạn đến trung hạn, lộ trình học tập hoàn toàn cản trở sự phát triển của bạn, sự khăng khăng tạo các thành phần tùy chỉnh, v.v. Tất cả những điều này khiến Tailwindcss không thể chịu nổi, TRONG THỜI HẠN NGẮN HẠN . Chỉ trong ngắn hạn!

Điều này có nghĩa là CSS Tailwind nên được dành riêng cho các dự án phức tạp, quy mô lớn do các nhà phát triển và công ty thực hiện. Đối với các dự án ngắn hơn, bạn nên tuân theo CSS thông thường. Điều này giúp kỹ năng CSS của bạn không bị suy yếu và tránh trở nên phụ thuộc quá nhiều vào các khung viết tắt như Tailwind CSS. Tại sao bạn nên tin tôi? Tôi đã thử thách bản thân khi sử dụng Tailwind CSS trong một dự án nhỏ và nó thực sự nhấn mạnh lý do tại sao nó phù hợp hơn cho các dự án lớn và lâu dài. Tôi rất hào hứng khi đi sâu vào các khung CSS khác và thậm chí có thể viết các bài báo về chúng!

Bạn có thể tìm hiểu nếu bạn đăng ký với tôi và chúng ta sẽ sớm gặp nhau;)