Tailwind CSS v4.0 ra mắt

• Tailwind CSS v4.0 ra mắt

  • Phiên bản mới tối ưu hóa hiệu năng và tính linh hoạt, tận dụng tối đa những tiến bộ mới nhất của nền tảng web hiện đại
  • Công cụ hiệu năng cao mới giúp tốc độ build toàn phần nhanh hơn tới 5 lần, tốc độ build tăng dần nhanh hơn hơn 100 lần
  • Được thiết kế cho web hiện đại bằng cách tận dụng các tính năng CSS mới nhất

• Công cụ hiệu năng cao mới

  • Tailwind CSS v4.0 là bản viết lại toàn diện của framework, tối ưu kiến trúc để đẩy tốc độ lên mức tối đa
  • Build tăng dần nhanh hơn hơn 100 lần, hoàn tất ở mức micro giây

• Thiết kế cho web hiện đại

  • Tận dụng các tính năng CSS mới nhất như native cascade layers, registered custom properties, color-mix()
  • Sử dụng logical properties để đơn giản hóa hỗ trợ RTL và giảm kích thước CSS được sinh ra

• Cài đặt được đơn giản hóa

  • Quy trình cài đặt được tinh giản, giảm số lượng dependency, và chỉ cần thêm một dòng mã vào tệp CSS
  • Cung cấp sẵn quy tắc @import mà không cần plugin bên ngoài

• Plugin Vite

  • Người dùng Vite có thể tích hợp Tailwind bằng @tailwindcss/vite
  • Sử dụng plugin Vite giúp hiệu năng được cải thiện hơn nữa

• Tự động phát hiện nội dung

  • Tự động phát hiện các tệp template nên không cần cấu hình
  • Tự động bỏ qua các mục trong tệp .gitignore để tránh quét không cần thiết

• Hỗ trợ import tích hợp sẵn

  • Có thể dùng @import để đưa inline các tệp CSS khác vào
  • Hệ thống import được tối ưu cho Tailwind CSS giúp tiếp tục cải thiện hiệu năng

• Cấu hình ưu tiên CSS

  • Có thể cấu hình dự án ngay trong CSS thay vì JavaScript
  • Có thể tùy biến trực tiếp trong tệp CSS mà không cần tệp tailwind.config.js

• Biến theme CSS

  • Cung cấp design token dưới dạng biến CSS để dễ dàng tham chiếu lúc runtime

• Giá trị utility và biến thể động

  • Được đơn giản hóa để nhiều utility và biến thể có thể chấp nhận giá trị tùy ý
  • Có thể dễ dàng thiết lập kích thước lưới hoặc thuộc tính dữ liệu tùy chỉnh

• Bảng màu P3 hiện đại hóa

  • Nâng cấp bảng màu mặc định từ rgb lên oklch để mang lại màu sắc sống động hơn

• Container queries

  • Cung cấp sẵn API để style phần tử theo kích thước của container

• Các utility biến đổi 3D mới

  • Bổ sung API để biến đổi phần tử trong không gian 3D

• API gradient mở rộng

  • Thêm các utility để tạo gradient tuyến tính, hình nón và hướng tâm

• Hỗ trợ @starting-style

  • Bổ sung tính năng chuyển đổi thuộc tính khi phần tử lần đầu hiển thị mà không cần JavaScript

• Biến thể not-*

  • Thêm hỗ trợ cho pseudo-class CSS :not()

• Các utility và biến thể mới được bổ sung

  • Thêm nhiều utility và biến thể mới như inset-shadow-*, field-sizing, color-scheme và hơn thế nữa

Tailwind CSS v4.0 là phiên bản mới nhất tối đa hóa hiệu năng và tính linh hoạt, mang đến nhiều tính năng mới cùng các cải tiến đa dạng.

[GN⁺]

Ý kiến trên Hacker News

• Đánh giá tích cực về sự phát triển của Tailwind v4, trong đó việc hỗ trợ biến CSS và cấu hình chỉ bằng CSS là những ưu điểm lớn. Họ cho rằng giờ đây Tailwind đang thực hiện rất tốt vai trò như một utility

• CSS đã trở nên thân thiện hơn với người dùng so với trước đây, và việc dùng trực tiếp thuộc tính style trong HTML có thể đơn giản hơn. Tuy nhiên, một số người vẫn muốn tránh dùng thuộc tính style

• Điểm hay của việc dùng Tailwind là có thể đọc style ở cùng một chỗ. Dù tên class khá dài, nó vẫn hữu ích vì giúp chỉnh sửa style dễ dàng

• Khi mới tiếp cận Tailwind, việc phải học lại CSS từng là một gánh nặng. Tuy nhiên, họ hiểu được rằng nó hữu ích ở khía cạnh làm việc nhóm và khả năng mở rộng. Dù vậy, họ vẫn thích stylesheet cơ bản hơn

• Trong các dự án dùng Tailwind, nó mang lại cảm giác trực quan và được tài liệu hóa tốt. Không cần phải nghĩ tên cho style nên giúp tiết kiệm thời gian

• Với bản cập nhật mới nhất của Tailwind, thời gian build đã giảm và không còn cần cấu hình JS nữa. Giờ đây CSS có thể đảm nhận hầu hết công việc

• Đã thử dùng Tailwind nhưng kết quả không tốt bằng Bootstrap. Họ đang cân nhắc cách tạo ra kết quả ổn mà không cần trở thành nhà thiết kế

• Kiểu thiết kế gọn gàng nhưng khá phổ thông của Tailwind đang xuất hiện rất rộng rãi. Điều này cho thấy cả ưu điểm lẫn giới hạn của inline style trong Tailwind

• Việc cập nhật lên Tailwind v4 đã ảnh hưởng đến các ứng dụng hiện có. Do vấn đề tương thích, có tình huống phải tiếp tục dùng v3 hoặc chỉnh sửa script build