Về tailwind Css, khi đọc phần giới thiệu framework css này tôi thực sự cảm thấy bất ngờ, thích thú đây là một cách mới để tạo ra giao diện website một cách hiện đại, nhanh chóng, có tính tùy biến cao bởi những class khai báo trực tiếp trên file html.
Tailwind Framework Css là gì?
Tailwind CSS về cơ bản là utility-first CSS framework cung cấp các class thực thi những chức năng nhỏ trong giao diện như .text-black .p-4 ... để xây dựng nhanh chóng các giao diện người dùng tùy chỉnh. Đây là một css framework cấp thấp, có thể tùy chỉnh cao, cung cấp cho bạn tất cả các công cụ bạn cần để xây dựng các thiết kế riêng mà không có bất kỳ sự ràng buộc nào.
Trước đây khi làm việc với Bootstrap Framework Css nó đã có những cấu trúc có sẵn và khi tạo ra các thành phần trên website thường có một cấu trúc chung nên nếu website đã dùng Bootstrap thì nó hao hao như nhau.
Khi muốn tùy biến theo kiểu của mình thì mất khá nhiều thời gian và cần phải sử dụng css thuần để kết hợp với Bootstrap để xây dựng giao diện website như ý của mình.
Khi biết đến Tailwind tôi thực sự bất ngờ, nó là hệ thống các class để thực hiện những nhiệm vụ nhỏ khác nhau, từ đó có thể tự ý phối kết hợp những class đó để tạo ra một giao diện như ý của mình.
Cùng sử dụng tailwind css nhưng mỗi website có thể hiển thị những kiểu khác nhau, nó hoàn toàn phụ thuộc vào tư duy kỹ năng css của người xây dựng nó.
Vậy nên để làm việc tốt trên Tailwind bạn cần nắm chắc Css cơ bản, bạn cần hiểu các thuộc tính css như tác dụng của nó, các định dạng của thuộc tính đó và tư duy về cách sử dụng nó.
Thay vì bạn cần mất công tự tạo ra style trên file css giờ đây với tailwind bạn chỉ cần khai báo class là sẽ có ngay kết quả mà gần như không cần phải di chuyển ra khỏi file html của mình.
Một số điểm nổi bật của Tailwind Css
- Xây dựng giao diện chỉ cần khai báo class trên file html
- Chỉ xuất ra những file css chứa những class đã sử dụng trong giao diện.
- Dễ dàng thiết lập Responsive ngay trên file html
- Hỗ trợ tương tác hover, focus… ngay trên class html
- Tối ưu những cấu trúc html css có tính lặp lại
- Định nghĩa thêm class mới được phối hợp bởi các class có sẵn trong tailwind
- Hỗ trợ chế độ tối Dark Mode
- Dễ dàng mở rộng, chỉnh sửa và biến đổi
- Tăng tốc độ code với Extension thông minh trên VS Code.
Phạm vi bài viết này tôi giới thiệu qua bạn những thứ hay ho của Tailwind, để chi tiết hơn những nội dung này, hẹn gặp bạn trong những bài viết tiếp theo và video trên kênh youtube unitop.vn.
Có nên học Tailwind css hay không?
Một người đã làm việc với css thuần cũng nhưng Bootstrap rất nhiều dự án khi tiếp xúc với Tailwind tôi nhận ra rằng mình có một không gian để từ đó có thể tùy biến xây dựng được giao diện như ý của mình nhanh chóng, code nhẹ nhàng tối ưu.
Vậy nên câu trả lời là bạn hãy sắp xếp học nó.
Nhưng với điều kiện bạn cần phải nắm chắc css thuần, còn không bạn sẽ chẳng thể tạo ra một giao diện nếu không hiểu được mình cần làm gì để gọi class phù hợp.
Tailwind là lựa chọn tuyện vời để có thể tạo ra giao diện phía người dùng có độ tùy biến cao, còn nếu bạn muốn tạo hệ thống admin với cấu trúc form và layout theo các component có sẵn thì Bootstrap là một giải pháp phù hợp hơn.
Tôi chúc bạn sẽ sớm làm chủ được tailwind Css trong tương lai gần từ đó nhanh chóng xây dựng được giao diện website chuyện nghiệp nhanh chóng mà không cần can thiệp nhiều vào css.
Nhưng trước tiên bạn cần có tư duy, kỹ năng nên tảng css thuần, bạn xem và tham khảo chương trình Html Css 21 Ngày của tôi để hoàn thiện kỹ năng trước khi học đến framework như tailwind css.
Hẹn gặp lại bạn ở bên trong!
