Hướng dẫn tailwind css reviews - đánh giá tailwind css
Bài viết này giúp bạn cài đặt Tailwind Css vào dự án của mình một cách dễ hiểu dễ thực hiện. Đây là một Framework Css giúp bạn tạo ra giao diện với css có độ tùy biến cao và hiệu suất cao. Show Tính năng nổi bật của Tailwind
Xem thêm: Tailwind là gì? Có nên học Tailwind Css không? Video hướng dẫn cài đặt Tailwind CssĐể giúp bạn hiểu rõ tư duy cũng như các thao tác rõ ràng nên tôi đã làm video bên dưới. Bạn xem và thực hành để hiểu và sử dụng tailwind css trong quá trình xây dựng giao diện website của mình. Chuẩn bịBạn chuẩn bị những thứ bên dưới để phục vụ cho quá trình cài đặt và sử dụng tailwind css trong dự án.
Các bước cài đặt tailwind Css vào websiteĐể cài đặt Tailwind Css vào website bạn thực hành từng bước theo video và phần ghi chú các câu lệnh đã sử dụng ở bên dưới. 1. Install Tailwind CSS
2. Configure your template paths
3. Add the Tailwind directives to your CSS File: src/tailwind.css
4. Start the Tailwind CLI build process
5. Start using Tailwind in your HTML
Kết luận Trong nội dung bài viết bao gồm video hướng dẫn này tôi tin rằng bạn sẽ hiểu và cài đặt được Tailwind Css vào trong dự án của mình. Tuy nhiên để sử dụng Tailwind Css hiệu quả đầu tiên bạn phải nắm vững nền tảng Css cơ bản trong website, bạn có thể tham khảo Html Css 21 Ngày hoàn thiện kỹ năng Css của mình trước khi đến với Framework Css như Bootstrap, Tailwind Css. Sang công ty mới được tiếp xúc với nhiều công nghệ quá. Cái gì với mình cũng mới, cái gì cũng lạ 🤣 Trong đó, lần đầu tiên mình biết đến một framework CSS là Tailwind CSS. Framework này khác hẳn với các framework trước đây mình đã từng dùng. Vì quá mới lạ, nên mình quyết tâm phải học cho bằng được, và cách học tốt nhất mình nghĩ ra được là đập đi làm lại toàn bộ (tất nhiên là giao diện thôi) của blog này bằng Tailwind CSS. Bối cảnhSang công ty mới, thì trong tháng đầu tiên người ta giao cho mình học ngôn ngữ PHP và framework rất nổi tiếng của nó là Laravel. Nguyên nhân là do đây là một ngôn ngữ quan trọng (các ngôn ngữ quan trọng của backend bao gồm Java, NodeJS, PHP, Python), thường được đưa ra để khách hàng lựa chọn do hiệu suất tốt và cộng đồng cực kỳ phát triển. Trong khi đó, ngôn ngữ Ruby và framework Ruby on Rails mình đã làm rất nhiều thì hoàn toàn không được chú ý tới do hiệu suất kém, điều khá lạ với một công ty thuần Nhật. Vừa học Laravel thì được biết đến Tailwind CSS. Và thế là dù mới học Laravel ở mức cho biết, còn chưa viết được trang web nào ra hồn, thì mình đã chuyển sang học Tailwind CSS rồi. Tất cả là do Tailwind CSS quá mới lại, khác hẳn với các framework CSS trước đây mình đã từng dùng (như Bootstrap hay MaterializeCSS) trong khi Laravel thì lại quen quen 😊 Tailwind CSS là gì?Khái quátNgay trang chủ của Tailwind CSS đã viết:
Đọc thế này mà hiểu được thì đúng là thánh 😄. Tất nhiên đó là lời giới thiệu thôi, tuy nhiên càng tìm hiểu và sử dụng Tailwind CSS thì mình càng thấy lời giới thiệu này hoàn toàn đúng. Ngoài ra thì ngay trong trang chủ cũng có thêm một đoạn như sau:
Với những gì đã trải qua thì mình hoàn toàn đồng ý với quan điểm này. Mình đã từng làm nhiều dự án sử dụng các framework dựng sẵn (chủ yếu là Bootstrap), mọi việc thường diễn ra theo hướng thế này:
Trong các phần tiếp theo, mình sẽ trình bày sơ qua về Tailwind CSS và cách sử dụng
Cơ bản về Tailwind CSSUtility FirstVới Tailwind CSS thì những class dựng sẵn kiểu như 2 của Bootstrap là hoàn toàn không tồn tại. Ngược lại thì Tailwind CSS đã dựng sẵn các class, gọi là các class utility (tiện ích). Tailwind CSS đã dựng sẵn rất nhiều tiện ích liên quan đến những thứ như:
Dưới đây là một số so sánh nho nhỏ giữa việc sử dụng Tailwind CSS là việc không sử dụng (tự viết CSS): Tự viết CSS Sử dụng Tailwind CSS Như vậy, Tailwind CSS đã dựng sẵn các class CSS (ví dụ 3) và cả các class responsive và nhiều tiện ích khác (ví dụ 4, 5) mà chúng ta có thể sử dụng dễ dàng vào HTML và không cần viết một dòng CSS nào. Ngược lại, cách làm này lại không có chúng ta những class dựng sẵn theo kiểu của Bootstrap (đã dựng sẵn các thành phần), mà mọi thứ chúng ta bắt buộc phải tự dựng hoàn toàn bằng các class tiện ích này. Với những người lần đầu tiếp xúc thì cũng hơi khó khăn.Ví dụ, với Bootstrap, thì một button chỉ cần viết thế này: thì với Tailwind CSS sẽ phải viết thế này: Các class utility của Tailwind CSS rất nhiều và gần như đầy đủ cho mọi thuộc tính (thực ra thỉnh thoảng thì vẫn hơi thiếu). Các class được đặt tên rất khoa học nên việc sử dụng tương đối dễ dàng. Tuy nhiên, cá nhân mình thì không thể nhớ hết được tất cả các class, mà vừa làm vừa tra tài liệu, lâu dần thì cũng nhớ được một số class hay dùng. Design systemTailwind CSS còn dựng sẵn cho chúng ta khá nhiều tiện ích, trong đó phải kể đến như: Các tiện ích về màu sắc, ví dụ:
Tương tự như vậy, font size cũng được định nghĩa sẵn các class:
Ngoài ra còn rất nhiều tiện ích về chiều cao, độ rộng, margin, padding, border, v.v... Việc của lập trình viên lúc này là chọn class nào phù hợp để sử dụng mà thôi, cái duy nhất cần phải maintain ở đây là HTML chứ không phải CSS. Bằng việc thống nhất các class được sử dụng trong team, một team có thể xây dựng một bản thiết kế thống nhất và linh hoạt. Đó là điểm mạnh của Tailwind CSS. Tuy nhiên, không phải lúc nào các class utility của Tailwind CSS cũng đã đủ dùng (điển hình nhất là bảng màu của Tailwind CSS thường không đáp ứng được yêu cầu) và khi đó chúng ta cần customize lại công cụ này một chút. CustomizeConfigTrước hết, để customize Tailwind CSS chúng ta cần thay đổi config của công cụ này. Tài liệu của Tailwind CSS đã rất chi tiết, mời các bạn đọc để hiểu thêm. Thay đổi config của Tailwind CSS có 2 kiểu: ghi đè và mở rộng. Ý kiến cá nhân của mình là không nên ghi đè, mà chỉ cần mở rộng là đủ (ví dụ bổ sung màu sắc, break point, v.v...). Không cần phải lo về việc sẽ nhiều class dư thừa không dùng tới, vì quá trình tối ưu cho production cũng sẽ loại bỏ những class này. Ngoài ra, một công cụ khá hay là plugins cũng có thể được dùng nếu cần thiết. Với plugin, chúng ta có thể tự định nghĩa các class mà chúng ta muốn. Ví dụ điển hình nhất chắc là 2, 3 vì hai pseudo này không được Tailwind CSS định nghĩa sẵn mà muốn dùng phải tự thêm. Lưu ý là chỉ khi chúng ta cần dựa trên Tailwind CSS để build các class mới cần dùng cách này, còn nếu chỉ đơn giản là các class riêng lẻ thì nên sử dụng directive (sẽ nói ở phần sau), hoặc đơn giản hơn là cứ viết trực tiếp vào file CSS nó cũng chạy bình thường.
Functions & DirectivesTailwind CSS cho phép chúng ta sử dụng Functions & Directives để customize CSS. Tài liệu của Tailwind CSS đã viết rất chi tiết và đầy đủ, mời các đọc để hiểu thêm về phần này. Lần này để làm lại blog này, ngoài 6 (để gọi các thành phần của Tailwind CSS) thì chỉ dùng đến 7 để thêm các class dùng cho pygments để highlight code mà thôi. Thực ra không dùng 7 cũng được, cứ viết thằng class như bình thường cũng chạy, nhưng đã dùng Tailwind CSS thì mình viết thêm tí trông cho nó pro 😛Đập đi làm lại blog bằng Tailwind CSSSau khi hiểu được phần nào Tailwind CSS thì mình quyết tâm thực hành bằng cách viết lại UI của blog này bằng Tailwind CSS. Về công việc thì cũng đơn giản, do trước đây mình đã từng viết lại CSS một lần rồi nên vẫn còn chút kinh nghiệm. Lần này đơn giản là thay các thuộc tính đó bằng class utility tương ứng của Tailwind CSS mà thôi. Việc cần chỉnh sửa là sửa lại các file template. Tuy nhiên mình cũng tiện thể refactor lại luôn. Trước đây mình đã chia file quá nhỏ (ví dụ footer thì chia thành 4-5 file thì nay gộp lại thành 1 file cho gọn). Đồng thời do nhiều thuộc tính không có sẵn trong Tailwind CSS trong khi không tìm được phương án customize mà tự viết CSS thì lìu tìu quá, nên mình đành phải dùng các phương pháp khác thay thế. Ví dụ như 9, 0 thì chuyển sang dùng HTML tag cho nhanh.Mình tiếp tục sử dụng SCSS và PostCSS để làm việc với Tailwind CSS. Về cơ bản thì không gặp vấn đề gì trong việc sử dụng các công cụ này. Lúc đầu mình lo khi sass gặp mấy câu kiểu như 6 không hiểu sẽ báo lỗi thì hỏng việc, nhưng hoá ra gặp trường hợp này sass sẽ để nguyên, sau đó thì Tailwind CSS khi được gọi bởi PostCSS sẽ dịch nốt. Có điểm đang lưu ý là file CSS production lần này lớn hơn lần trước kha khá (lần trước chỉ hơn 10KB mà lần này hơn 16KB) nhưng đã bỏ đi được rất nhiều thư viện bên ngoài nên tổng thể là tốt hơn trước nhiều.Sau khi đập đi làm lại (phần HTML) thì mạnh dạn thực hiện một số thay đổi như sau:
Nhận xétTailwind CSS khác hoàn toàn với các framework CSS khác. Tuy nhiên, mình không cho rằng chúng là đối thủ cạnh tranh và sẽ thay thế lẫn nhau. Việc so sánh các framework với nhau là để hiểu hơn về các framework là chính, vì với bài toán này thì framework này phù hợp, bài toán khác thì framework khác lại tốt hơn. Điều quan trọng là phải tận dụng tối đa các đặc điểm của mỗi framework. Tuy nhiên, cần phải nhấn mạnh rằng bản thân Tailwind CSS không liên quan gì đến việc "làm nên một thiết kế đẹp". Nó là một công cụ để xây dựng UI cho một trang web, chứ nó không tạo ra UI của trang web đó. Ưu điểmƯu điểm nổi trội của Tailwind CSS không thể không nhắc đến đó là: Bạn không cần viết 1 dòng css nào mà chỉ cần thêm class để tạo giao diện, bạn không cần phải đau đầu suy nghĩ tên class để đặt cho các div. Đúng như slogan ngay ở trang chủ của Tailwind CSS:
Ngoài ra, các tên class của tailwind rất khoa học, dễ hiểu và dễ sử dụng, mỗi class là một thuộc tính. Bạn cần thuộc tính gì thì dùng class tương ứng như thế. TailwindCSS giúp cải thiện hiệu suất vì giảm thiểu các việc trùng lặp thuộc tính. Có nhiều plugin hỗ trợ loại bỏ các class thừa không sử dụng, giảm thiểu việc có mặt trong việc khai báo ở class HTML. Đồng thời giúp giảm chi phí maintain ứng dụng do không cần maintain CSS nhiều (chủ yếu maintain HTML là đủ). Không phải lo lắng về việc sửa ở một chỗ này có thể chết ở chỗ khác do việc sử dụng cascading tạo ra. Bạn sửa HTML ở đâu thì nó chỉ có tác dụng ở đó. Còn nếu dùng Tailwind CSS mà vẫn lỗi chỗ này chỗ kia thì đành trách mình quá kém thôi. Tài liệu chi tiết, đầy đủ bao gồm tất cả cách sử dụng chi tiết của class và chỉ dẫn nhiều cách tùy chỉnh khác nhau. Bạn có thể tìm hiểu tại đây. Nhược điểmBên những ưu điểm trên thì nó cũng có những nhược điểm nhất định. Đầu tiên là bạn phải là một người kha khá về CSS thì mới có thể sử dụng được. Như mình khi lần đầu làm với Tailwind CSS cũng rất vất vả, đó là mình đã có kinh nghiệm tự viết CSS cho blog này rồi đấy. Nếu chưa thì chắc bó tay luôn. Hơn nữa là sẽ mất nhiều thời gian cho những bạn mới bắt đầu vì chưa làm quen được hết các class của Tailwind CSS. Phải cần có thời gian để có thể nhớ về các quy tắc và cách thức viết cho đúng chuẩn. Khi sử dụng Tailwind CSS thì bạn sẽ thấy là số lượng class cho mỗi tag là cực kì nhiều, số class sẽ tương ứng với số thuộc tính mà bạn muốn cài đặt. Ví dụ như dưới đây là thuộc tính cho tiêu đề của mỗi bài viết. Đó là chưa kể những chỗ phức tạp hơn như thanh navbar chẳng hạn. Vì nguyên nhân này nên code HTML sẽ dài hơn và khó ngắt dòng hơn. Như mình trước đây đã quyết tâm là ngắt dòng ở 80 ký tự thì nay không thể làm được nữa. Cố ngắt thì cũng được nhưng nó không đúng spec HTML lắm 🤣 Một điểm mình thấy khá khó hiểu là phần lớn các tiện ích (nhất là các tiện ích liên quan đến màu sắc) được xây dựng rất cồng kềnh. Ví dụ class sau: Sao không viết thế này cho ngắn gọn: Một nhược điểm nữa là dù số class tiện ích rất nhiều nhưng Tailwind CSS cũng không thể nào đủ hết 100% thuộc tính CSS nên bạn cần phải config thêm khi muốn sử dụng. Mình đã tốn kha khá thời gian tìm hiểu về các pseudo 2, 3 nhưng không thành công, và cuối cùng chọn giải pháp là dùng thẻ HTML khác để thay thế.Nhược điểm cuối cùng mình thấy là Tailwind CSS không hỗ trợ tất cả trình duyệt (IE không được hỗ trợ gì luôn). Các class utility chỉ là thuộc tính CSS đơn thuần, không hề có thủ thuật hay polyfill gì để hỗ trợ các trình duyệt cũ. Với blog của mình thì không vấn đề gì nhưng nếu làm việc với khách hàng thì đây cũng là một điểm cần lưu ý. |