Sơ lược về Tailwind
- Tailwind mang lại cho chúng ta làn gió mới trong việc phát triển web tuy nhiên không phải ai cũng thích kiểu code của Tailwind . Riêng mình thì nghiện không dứt ra được !
- Với kiểu code inline thì không phải dev nào cũng thích, tuy nhiên từ 2019 nó trở nên cực kỳ phổ biến
- Cá nhân mình thích kiểu cứ copy rồi dùng và đặt biệt không ảnh hưởng đến các file khác.
Một số thông tin và từ khóa thêm cho các anh em về bản Tailwind 4.x này
- Đọc trăm thứ không bằng đọc docs các anh em có thể tham khảo Docs Beta ở link này nhé : Doc beta Tailwind CSS 4x
- Tailwind 4x được released vào tháng 11 năm 2024 , cũng cách lúc tôi viết bài này 2 tháng , cũng còn mới ra .
- Một số từ khóa khác chia sẻ cho các anh em : Lightning Css, Tailwind Oxide, OKLCH. Tạm nhiêu đó thôi
- Nếu anh em nào muốn hiểu sâu thì có thể đọc docs của Tailwind 3x để so sánh nhé
Những nét mới của Tailwind v4 so với v3
Sử dụng Engine mới
- Sử dụng Engine Oxide để cải tiến đáng kể về Framework
- Engine này được xây bằng Rust giúp tăng tốc độ xử lý và tối ưu hóa hiệu suất . Giúp build nhanh hơn
- Dùng Lightning Css cũng xây bằng Rust giúp chuyển Css từ PostCSS và Autoprefixer nhanh hơn . Nó sử dụng đa luồng và song song hóa để tính toán nhanh hơn
Cấu hình đơn giản hơn
- Đa phần cấu trúc config sẽ được tối giản , anh em cứ vào docs relese để đọc nhiều còn về ví dụ thì đây:
- **V3 sử dụng thế này : **
@tailwind base;
@tailwind components;
@tailwind utilities;
- V4 thì chỉ cần thế này thôi
@import "tailwindcss";
Chỉnh lại khoảng cách động
- Chuyển m-, w-,mt-* ,... trở thành bội số của 0,25 rem. Kiểu m-1 thì 0.25 rem, m-3 thì 0.75 rem
Chuyển từ màu RGB sang OKLCH
- GIúp màu trở nên sống động hơn, các bác cứ nhìn bảng màu này là rõ
Cách nâng từ V3 lên V4
cứ chạy lệnh này
npx @tailwindcss/upgrade@next
Bài viết tham khảo: blog.logrocket.com/getting-ready-tailwind-v4 , Cảm ơn các anh em đã đọc!