tailwind CSS v4.0: nhân tố thay đổi cuộc chơi hoàn hảo cho phát triển web hiện đại [Bài dịch]
(siosio3103.medium.com)- Điểm nổi bật quan trọng nhất của v4.0 là cải thiện hiệu năng: bản build toàn phần nhanh hơn tới 5 lần, build tăng dần nhanh hơn hơn 100 lần
- Chuyển đổi mô hình với cấu hình ưu tiên CSS: thiết lập trực tiếp trong CSS thay cho
tailwind.config.js - Kiểm soát độ ưu tiên style bằng
@layer - Có thể định nghĩa thuộc tính tùy chỉnh bằng quy tắc
@property - Dùng hàm
Color-Mix()để điều chỉnh độ trong suốt của mọi giá trị màu, bao gồm biến CSS và currentColor - Thay vì
margin-leftvàmargin-right, giờ có thể xử lý một lần bằng thuộc tính logic nhưmargin-inline, giúp hỗ trợ RTL đơn giản hơn rất nhiều - Quy trình cài đặt được đơn giản hóa:
npm i tailwindcss @tailwindcss/postcssexport default { plugins: ["@tailwindcss/postcss"],};@import "tailwindcss";là xong - Tự động phát hiện nội dung: giờ đây tự động bỏ qua
.gitignorevà các tệp nhị phân như ảnh/video, đồng thời tự động quét các tệp liên quan. Hỗ trợ@sourcecho các ngoại lệ - Ưu tiên hỗ trợ Vite Plugin
- Có thể dùng ngay các giá trị không tồn tại trong cấu hình cũ nhờ tạo utility động
- Hệ thống màu sắc được nâng cấp: toàn bộ bảng màu mặc định được chuyển từ RGB sang OKLCH
- Container Queries được tích hợp sẵn trong framework
- Hỗ trợ 3D Transforms và bổ sung gradient được cải tiến
- Bao gồm các Variants và Utilities mới:
not-*,starting,inert,nth-*, variantdescendantcùng các utilityfield-sizing,color-scheme,inset-shadow-* - Việc migration dễ hơn dự kiến: phần lớn thay đổi có thể nâng cấp tự động
- Bức tranh lớn mà tailwind hướng tới: vượt xa một bản cập nhật framework đơn thuần, đây là bước thách thức táo bạo hướng đến tương lai của CSS
- Có nhất thiết phải nâng cấp không?: nếu là dự án mới thì nên chọn v4.0. Với dự án hiện có, nếu dịch vụ nhắm tới trình duyệt hiện đại thì có thể nâng cấp khá dễ dàng
- Kết luận: tailwind CSS v4.0 không chỉ là tiến hóa đơn thuần mà là một cuộc cách mạng
12 bình luận
Sau khi áp dụng và dùng Tailwind trong 1 năm
Có dùng cho dự án tiếp theo không? CÓ
Có phải là yếu tố thay đổi cuộc chơi của phát triển web không? KHÔNG
Cụm từ “game changer” nghe hơi quá nên tôi mới để lại bình luận.
Tôi nghĩ khó có thể khẳng định đó là một phong cách tiến bộ mà sau này ai cũng nên hướng tới.
Tailwind có ưu điểm trong việc sao chép/dán template, tạo nhanh bằng AI và chỉnh sửa các style đơn giản, nhưng
ngay cả những thẻ vốn dễ đọc cũng có thể trở nên rối rắm, và cũng khó để tái hiện thật tinh chỉnh một thiết kế do designer tạo ra. Tôi cũng nghĩ rằng nếu chỉ định tốt các biến CSS thì mức độ khó cũng không khác nhiều so với inline style.
Xin hãy hỗ trợ RN..
Đừng đi quá xa… có thể nó sẽ nuốt chửng mọi thứ…
Chắc trước mắt cứ dùng 3.x, rồi khi nào nó thật sự thành xu hướng lớn thì sẽ migrate.
https://tailwindcss.com/docs/upgrade-guide
shadow-sm->shadow-xsshadow->shadow-smThật khó đoán ở phiên bản tiếp theo họ sẽ còn phá vỡ tương thích kiểu gì nữa.
Cứ liên tục tuôn ra các công nghệ web.
Chỉ với những công nghệ đã có sẵn cũng là đủ rồi.
Chỉ cần có C, Assembly, HTML và JavaScript là làm được mọi thứ.
Bạn vẫn là người chưa dùng các “hàm” của Excel sao?
Dùng máy tính cũng làm được hết mà.
Vậy thì tại sao lại dùng dấu chấm thay cho khoảng trắng?
Đây là một phần của kiểu nói đùa theo phong cách “ông chú” trên mạng. Có vẻ như đây là một màn nhại lại việc người lớn tuổi hay chấm câu liên tục thay cho khoảng trắng..
Anh Kim. Tôi mạn phép muốn góp một lời khuyên. Không gì khác, đó là đừng dùng quá nhiều hàm Excel.. Nếu có sự tiện lợi thì rủi ro cũng tăng lên. Để mổ bò thì có lưỡi dao phù hợp, còn bắt gà thì có cần đến dao không? Điều đơn giản có thể là đáp án đúng.
Hahahahaha buồn cười quá.
😅
Nói là đơn giản hóa và nâng cấp, nhưng rốt cuộc vẫn là phải học thêm một thứ nữa. Chỉ vậy thôi.