Bài viết này dành cho tất cả các bạn developer, tuy nhiên nếu bạn đang theo chuyên ngành Front-end, hay là có ý định đi theo chuyên ngành này thì đây chính là bài mà các bạn nên đọc.

Ở bài viết này, Cao đẳng FPT Mạng cá cược bóng đá sẽ tập trung chủ yếu vào việc giới thiệu Framework Tailwind Css và những ưu nhược điểm của nó, còn lại tất cả những gì liên quan tới cài đặt, tip, tricks… sẽ đề cập đến ở những bài sau.

Nếu như các bạn đã định hướng mình là Front-end developer, một điều chắc chắn là chúng ta sẽ không còn lạ lẫm gì với Bootstrap nữa, đây là Framework hỗ trợ rút ngắn thời gian xây dựng website vô cùng mạnh mẽ, được rất nhiều Developer hướng đến sử dụng. Tất nhiên lí do thì rất đơn giản là vì nó dễ sử dụng và cung cấp cực nhiều component được viết sẵn. Vấn đề là khi các bạn sử dụng nó cho những dự án lớn, sẽ rất khó để kiểm soát được Css cũng như những thành phần không được sử dụng đến, và vô hình chung sẽ phát sinh ra những vấn đề về hiệu suất cũng như tốc độ tải trang, thực sự khá đau đầu cho Developer.

Rồi Tailwindcss ra đời, giải quyết được những vấn đề mà chính Bootstrap đang gặp phải. Điểm khác biệt lớn nhất giữa Tailwindcss với những Framework khác nằm ở chỗ Tailwind không cung cấp bất kỳ thành phần UI nào được định nghĩa trước, nghĩa là chúng ta sẽ không thể mì ăn liền được. Vậy thì nó mang đến cho các bạn những gì? Mình biết đây là điều các bạn đang quan tâm. Tailwind giúp các bạn xây dựng giao diện website một cách nhanh chóng thông qua các thuộc tính Css đã được viết thành những Class riêng, và việc của chúng ta là gọi các Class đó ra để sử dụng. Điều này sẽ giúp các bạn kiểm soát được lượng code css cũng như dễ dàng loại bỏ những gì không dùng đến.

Ưu điểm đầu tiên đó là việc các bạn có thể xây dựng bất kỳ giao diện nào  mà không cần phải viết thêm css để custom. Ví dụ:

Tailwindcss code:

Bootstrap code:

Kết quả của 2 đoạn code trên sẽ như sau:

Đối với Bootstrap, các bạn sẽ phải viết thêm css nếu như muốn thay đổi giao diện của button, còn đối với Tailwind thì chỉ cần thay đổi class để ra đúng giao diện mong muốn thôi. Hay ho hơn hẳn so với việc phải code thêm nhỉ.

Bên cạnh đó, ưu điểm thứ hai là chúng ta có thể sử dụng các class build-in trong Tailwind để viết một class mới thông qua từ khóa @apply

Có thể nói đây là một điểm khá là hay ho ở Framework này mà bạn rất thích vì rõ ràng là nó thu gọn code  hơn rất nhiều, chứ code rối mắt là mình đã không thích rồi.

Ưu điểm thứ ba là các bạn có hẳn một file config để dễ dàng tùy biến giao diện. Và cái việc tạo ra cái file config này nó còn dễ hơn cả viết đơn xin chuyển ngành của các bạn. Và tất nhiên, đã gọi là tùy biến thì đồng nghĩa chúng ta có thể tạo ra bất cứ giao diện nào mình muốn ( chỉ nghĩ thôi đã thấy phê pha lắm rồi ).

Cuối cùng, điểm tối ưu nhất ở Tailwind là gì? Đó chính là mình được phép viết class cho các sự kiện như hover, active, disabled, visited, first-child, last-child… điều mà Bootstrao khóc không thành tiếng luôn các bạn ạ. À suýt quên, viết như thế nào thì các bạn xem qua bên dưới nhé!

Đấy là ưu điểm, còn nhược điểm thì sao nhỉ? E hèm, trước cái lúc mà mình phát hiện ra mình có thể viết class mới rồi @apply các class được build-in vào thì đó chính là nhược điểm đấy, nhìn cái dòng code 1 đống class trông hơi mất thẩm mĩ, nhưng giờ ổn rồi. Trong thời gian tới tìm ra được nhược điểm nữa thì chúng tôi sẽ chia sẻ với các bạn sau nhé.

Vậy đó, qua những chia sẻ trên thì hi vọng các bạn phần nào có thể mường tượng ra được Tailwindcss nó là cái gì, được sử dụng ra sao, một số điểm hay ho của nó.

Nguồn tham khảo:

Giảng viên Tân Văn Sơn – Bộ môn Công nghệ thông tin

Trường Cao đẳng FPT Mạng cá cược bóng đá Hà Nội