Có đáng để học Tailwind CSS không?

Tôi không bao giờ có ý định cố ý bash bất kỳ công nghệ nào. Tôi tin rằng mọi công nghệ đều có trường hợp sử dụng hợp lệ của nó. Nhưng với tư cách là một nhà phát triển, điều cần thiết là phải phân tích một công nghệ cũng như những ưu và nhược điểm của nó trước khi đi theo xu hướng áp dụng nó vì lợi ích của nó

Một trong những công nghệ mới đang thu hút nhiều sự chú ý hiện nay là Tailwind CSS. Khi tôi lần đầu tiên nghe về nó, tôi đã ngay lập tức quan tâm vì thiên hướng tự nhiên của tôi đối với thế giới giao diện người dùng

Tailwind là một khung tiện ích CSS. Nó được tạo ra cho các mục đích tiện ích, có nghĩa là nó được cho là giúp cho việc phát triển dễ dàng hơn. Nó không giống các khung CSS phổ biến khác như Bootstrap ở chỗ Tailwind không cung cấp bất kỳ thành phần giao diện người dùng tích hợp nào

Nói một cách ngắn gọn, lợi ích chính của Tailwind là nó giúp bạn không phải viết vô số CSS và thay vào đó, bạn có thể sử dụng Tailwind trực tiếp trong HTML của mình. Đó cũng là điều đầu tiên mà họ đang quảng cáo trên trang web chính thức của họ — ý tưởng không cần phải rời khỏi HTML của bạn

Cộng đồng giao diện người dùng luôn đổi mới và mọi người tiếp tục tạo ra các công nghệ mới để tạo thuận lợi cho công việc hàng ngày của chúng tôi. Những nhà phát triển này chắc chắn xứng đáng nhận được một số tín nhiệm, nhưng trước khi bắt đầu bất kỳ chuyến tàu nào hoặc sử dụng một công nghệ được thổi phồng, chúng ta nên cân nhắc những ưu và nhược điểm trước khi áp dụng nó

Rất nhiều hướng dẫn đã được thực hiện liên quan đến khung tiện ích mới này và có vẻ như nó có rất nhiều lợi ích tuyệt vời. Trước khi thảo luận xem việc sử dụng Tailwind có phải là một lựa chọn tốt hay không, hãy cùng điểm qua những ưu và nhược điểm của Tailwind

Ưu điểm của Tailwind

1. Nó làm cho quá trình tạo kiểu nhanh hơn nhiều

Không còn nghi ngờ gì nữa, Tailwind giúp bạn tạo kiểu cho các thành phần HTML của mình nhanh hơn rất nhiều. Vì bạn không phải để lại phần đánh dấu của mình, nên thực tế bạn có thể trực tiếp tạo kiểu cho các phần tử của mình. Bạn có thể tạo bố cục đẹp trong thời gian ngắn hơn nhiều so với làm từ đầu

2. Nó cung cấp nhiều tiện ích hơn

Bạn không phải giải quyết nhiều vấn đề mà nhiều nhà phát triển gặp phải với CSS. Không có gì bí mật khi nhiều nhà phát triển không thích CSS hoặc về cơ bản thấy nó khó xử lý. Đối với một nhà phát triển như vậy, việc sử dụng các lớp tích hợp mà Tailwind cung cấp sẽ giúp nhà phát triển giảm bớt rất nhiều khó khăn với CSS

3. Nó cung cấp bảo mật

Điều này đúng với bất kỳ khuôn khổ đã thử nghiệm nào mà mọi người sử dụng một cách an toàn trong sản xuất. Vì nó đã được thử nghiệm và khung ổn định, bạn có thể sử dụng nó và yên tâm rằng mọi thứ sẽ không bị hỏng. Ngoài ra, vì bạn được sao lưu bằng một khung do các kỹ sư có kinh nghiệm tạo ra nên họ sẽ bảo vệ bạn nếu có bất kỳ vấn đề nào phát sinh trong khung

Hãy chuyển sang phần thảo luận về một số nhược điểm có thể xảy ra khi sử dụng Tailwind CSS

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

1. Đánh dấu của bạn trở nên rất dài dòng

Nếu bạn đã biết cách Tailwind thường được sử dụng, thì bạn cung cấp cho các thành phần HTML một loạt các lớp Tailwind chịu trách nhiệm tạo kiểu. Tôi thấy khá khó để đọc những gì các lớp học đang làm. Theo tôi, đó không phải là cách tự nhiên để xử lý CSS và nó đánh bại khái niệm "phân tách các mối quan tâm" . Tôi muốn kiểu dáng của mình tách biệt khỏi phần đánh dấu và không trộn lẫn chúng với nhau quá nhiều

Để minh họa điều tôi muốn nói, đây là một ví dụ về cách Tailwind đang được sử dụng từ trang web chính thức của họ

Ví dụ về các lớp Tailwind

Tôi không biết về bạn, nhưng đối với tôi điều này rất dài dòng và khá khó đọc

2. Đôi khi bạn có thể phải làm việc xung quanh khuôn khổ

Đây là một vấn đề khác mà bạn có thể nhảy vào. Khi bạn không thể tìm thấy hỗ trợ cho trường hợp sử dụng cụ thể của mình trong tài liệu, bạn có thể sẽ phải điều chỉnh khung một chút để phù hợp với nhu cầu của mình. Về cơ bản, bạn sẽ tạo khuôn khổ nhỏ của riêng mình xung quanh Tailwind. Tôi muốn có toàn quyền kiểm soát phong cách của mình ngay từ đầu thay vì phải bỏ qua các phong cách Tailwind tích hợp trong tương lai

3. Đó là một cái nạng cho những nhà phát triển không biết rõ về CSS

Một nhà phát triển giao diện người dùng giỏi nên thoải mái viết CSS từ đầu và thậm chí tạo một khung cá nhân. Khi bạn dựa vào một framework để thực hiện tất cả các công việc nặng nhọc cho bạn mà không thực sự biết điều gì đang xảy ra trong nền, bạn có thể mất kiểm soát về kiểu dáng của mình và không biết cách gỡ lỗi bất kỳ sự cố nào

4. Phải mất thời gian để trở nên hiệu quả với nó

Tất nhiên đây là một sự đánh đổi với bất kỳ khuôn khổ nào. Nhưng thực tế là khi bạn áp dụng một khuôn khổ mới, sẽ mất thời gian để nó trở nên hiệu quả

Điều làm tôi khó chịu ở đây là bạn cần học rất nhiều tên lớp, trong khi thực tế là bất kỳ nhà phát triển giao diện người dùng lành nghề nào cũng có thể viết các lớp CSS đó từ đầu khá nhanh. Vì vậy, tôi thực sự không thể biết được Tailwind sẽ mang lại lợi ích bao nhiêu cho nhà phát triển như vậy

Ở đây tôi đoán tất cả là do sở thích cá nhân. Nếu bạn sẵn sàng dành thời gian tìm hiểu framework để tăng tốc độ tạo kiểu CSS về lâu dài, thì hãy bắt đầu. Cá nhân tôi thích viết nó từ đầu vì tôi kiểm soát các lớp CSS của mình tốt hơn theo cách đó

Những từ cuối

Nếu bạn không giỏi về CSS, thì bạn nên ưu tiên học nó thật kỹ trước khi sử dụng một khung tiện ích như Tailwind, vì nếu không, bạn có thể sẽ sử dụng các lớp mà không biết chúng thực sự làm gì hoặc hoạt động như thế nào

Nếu bạn giỏi CSS nhưng muốn tăng tốc quá trình tạo kiểu và sẵn sàng đầu tư thời gian để tìm hiểu về khung, thì Tailwind có thể trở thành một lựa chọn tuyệt vời dành cho bạn

Tôi có thể sẽ khám phá Tailwind nhiều hơn nữa trong tương lai và có thể sau này tôi sẽ thay đổi quyết định. Nhưng hiện tại tôi nghĩ tốt hơn hết là không dùng nó, vì tôi không thấy bất kỳ giá trị nào lớn hơn khi sử dụng nó thay vì viết CSS tùy chỉnh

Cần bao nhiêu thời gian để tìm hiểu Tailwind CSS?

1. 5 giờ video theo yêu cầu. Truy cập trọn đời.

Tôi nên học Bootstrap hay Tailwind CSS?

Nếu bạn không phải là nhà thiết kế và chỉ muốn tập hợp một giao diện người dùng nhanh chóng và dễ dàng để mọi người sử dụng, thì Bootstrap có thể là lựa chọn phù hợp. Tuy nhiên, nếu bạn muốn hoàn toàn tự do với thiết kế của mình và khả năng dễ dàng tạo các thiết kế cũng như thành phần tùy chỉnh thì Tailwind CSS là lựa chọn tốt hơn .