Công khai tiến độ Tailwind CSS v4.0 dưới dạng mã nguồn mở

• Oxide, engine hiệu năng cao mới, đang được phát triển cho Tailwind CSS v4.0.
• Được thiết kế để đơn giản hóa trải nghiệm lập trình viên và tận dụng những bước tiến mới nhất của nền tảng web.
• Ban đầu dự kiến phát hành như một bản phát hành v3.x, nhưng đã được quyết định phát hành thành v4.0 như một thế hệ framework mới.
• Vẫn đang ở giai đoạn đầu và còn nhiều việc phải làm, nhưng bản alpha công khai đầu tiên đã được gắn thẻ để có thể bắt đầu thử nghiệm.

Engine mới, được xây dựng vì tốc độ

• Engine mới được viết lại từ đầu, mang lại tốc độ nhanh hơn với ít mã hơn.
• Cung cấp tốc độ build nhanh hơn tới 10 lần; website Tailwind CSS có thể build trong 105ms, còn bộ UI Catalyst chỉ mất 55ms.
• Kích thước cài đặt của engine mới đã giảm hơn 35%, đồng thời bao gồm các gói native nặng như Rust và Lightning CSS.
• Sử dụng Rust để xử lý những phần tốn kém nhất của framework, đồng thời giữ phần lõi bằng TypeScript để đảm bảo khả năng mở rộng.
• Engine mới chỉ phụ thuộc vào Lightning CSS.
• Đã tự viết parser CSS và thiết kế cấu trúc dữ liệu cho tốc độ phân tích nhanh gấp 2 lần PostCSS.

Toolchain tích hợp

• Tailwind CSS v4 không còn là một plugin nữa, mà là một công cụ all-in-one để xử lý CSS.
• Việc xử lý @import, vendor prefixing, hỗ trợ nesting và nhiều thứ khác được tích hợp sẵn nên không cần cấu hình riêng.
• Chuyển đổi các tính năng CSS hiện đại như màu oklch() và phạm vi media query sang cú pháp có hỗ trợ trình duyệt tốt hơn.
• Vẫn tiếp tục cung cấp plugin PostCSS, đồng thời đang khám phá plugin cho bundler, và cung cấp plugin Vite chính thức cùng bản alpha đầu tiên.

Được thiết kế cho web hiện đại

• Tailwind CSS v4 hướng tới việc xây dựng một framework vẫn mang cảm giác tiên tiến trong vài năm tới.
• Sử dụng quy tắc @layer thực sự để giải quyết các vấn đề về specificity từng gây rắc rối trước đây.
• Dùng @property để định nghĩa rõ ràng các custom property nội bộ và cho phép các hiệu ứng như gradient nền.
• Dùng color-mix để giúp việc chỉnh độ mờ của biến màu hoặc điều chỉnh độ mờ của currentColor trở nên dễ dàng hơn.
• Hỗ trợ trực tiếp container queries trong core, và hỗ trợ phạm vi container query thông qua các biến thể @min-* và @max-* mới.

Các biến thể có thể kết hợp

• Kiến trúc mới cho phép kết hợp với nhau các biến thể tác động lên những selector khác nhau.
• Ở các phiên bản trước, những biến thể như group-has-* phải được định nghĩa rõ ràng trong framework, nhưng giờ đây group-* có thể được kết hợp với biến thể has-* hiện có.

Phát hiện nội dung zero-config

• Trong bản alpha ban đầu, không thể cấu hình đường dẫn content, và với hầu hết dự án thì cũng không cần thiết phải thiết lập lại điều này.
• Khi dùng plugin PostCSS hoặc CLI, Tailwind sẽ crawl toàn bộ dự án để tìm các file template.
• Khi dùng plugin Vite, nó dựa vào module graph để biết chính xác những file nào thực sự đang được sử dụng.

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

• Một mục tiêu lớn của Tailwind CSS v4.0 là khiến framework mang cảm giác native của CSS, thay vì giống một thư viện JavaScript.
• Sau khi cài đặt, thêm nó vào dự án bằng câu lệnh @import CSS thông thường.
• Thay vì thiết lập mọi tùy chỉnh trong file cấu hình JavaScript, sử dụng biến CSS.

Những thay đổi

• Các thay đổi quan trọng không được thực hiện một cách tùy tiện, nhưng ở v4 có một số thứ được xử lý khác đi.
• Loại bỏ các utility không còn được tài liệu hóa.
• Plugin PostCSS và CLI được cung cấp dưới dạng các package riêng biệt.
• Loại bỏ màu viền mặc định.
• Mặc định, utility ring giờ là vòng 1px sử dụng currentColor.

Lộ trình tới v4.0

• Engine mới đã được viết lại từ đầu và hoàn toàn tập trung vào trải nghiệm lập trình viên với cách tiếp cận cấu hình mới.
• Khả năng tương thích ngược được xem là rất quan trọng và là phần việc lớn để có bản phát hành v4.0 ổn định.
• Bao gồm hỗ trợ file cấu hình JavaScript, cấu hình đường dẫn nội dung tường minh, hỗ trợ dark mode khác, hỗ trợ plugin và utility tùy chỉnh, cấu hình tiền tố lớp, hỗ trợ safelist và blocklist, hỗ trợ cấu hình important, hỗ trợ hàm theme(), hỗ trợ CLI độc lập, v.v.

Thử bản alpha

• Một số bản alpha đã được gắn thẻ và bạn có thể bắt đầu thử nghiệm ngay hôm nay trong dự án của mình.
• Nếu đang dùng extension Tailwind CSS IntelliSense, bạn cần chuyển sang bản pre-release trên trang extension của VS Code.
• Nếu phát hiện vấn đề, họ mong bạn báo trên GitHub.

Sử dụng Vite

• Cài đặt Tailwind CSS v4 alpha và plugin Vite mới.
• Thêm plugin vào file vite.config.ts.
• Import Tailwind trong file CSS chính.

Sử dụng PostCSS

• Cài đặt Tailwind CSS v4 alpha và package plugin PostCSS riêng biệt.
• Thêm plugin vào file postcss.config.js.
• Import Tailwind trong file CSS chính.

Sử dụng CLI

• Cài đặt Tailwind CSS v4 alpha và package CLI riêng biệt.
• Import Tailwind trong file CSS chính.
• Biên dịch CSS bằng công cụ CLI.

Ý kiến của GN⁺

• Việc công khai mã nguồn mở Tailwind CSS v4.0 mang lại cho cộng đồng lập trình viên cơ hội trải nghiệm sớm các tính năng và cải tiến mới. Điều này đồng nghĩa với việc các lập trình viên có thể đưa ra phản hồi về framework và góp phần tạo nên bản phát hành cuối ổn định hơn.
• Cải thiện hiệu năng của engine mới có vẻ giúp rút ngắn đáng kể thời gian build, đặc biệt hữu ích trong các dự án quy mô lớn hoặc môi trường coi trọng chu kỳ phát triển nhanh.
• Sự kết hợp giữa Rust và TypeScript phản ánh một cách tiếp cận hiện đại nhằm theo đuổi đồng thời hiệu năng và khả năng mở rộng. Phần được viết bằng Rust tối đa hóa hiệu năng, trong khi TypeScript giúp lập trình viên dễ dàng mở rộng và bảo trì hơn.
• Cách cấu hình mới dùng biến CSS thân thiện với CSS hơn so với thiết lập dựa trên JavaScript trước đây, đồng thời có thể giúp việc tích hợp với hệ thống thiết kế trở nên dễ dàng hơn.
• Những thay đổi này có thể đòi hỏi một phần công việc migration đối với người dùng hiện tại, nhưng về lâu dài được kỳ vọng sẽ dẫn tới codebase gọn gàng hơn và dễ bảo trì hơn.

[GN⁺]

Ý kiến trên Hacker News

• Tailwind CSS là điều tuyệt vời thứ hai trong frontend, chỉ có Vue 3 là vượt qua nó.

  • Không phải tốn công đặt tên class CSS, cũng không có vấn đề CSS trùng lặp hay class xung đột.
  • Mọi mã đều nằm trong một file nên có thể hình dung component chỉ bằng cách nhìn vào code.
  • Tôi sẽ không quay lại SCSS, và tôi nghĩ tổ hợp Vue 3, TailwindCSS, Vite là tốt nhất.

• Với tư cách là một người chỉ trích Tailwind rất mạnh mẽ, mọi công bố dưới cấu hình CSS-first đều rất đáng hoan nghênh.

  • Có thể tận dụng design token, reset, v.v. của Tailwind, đồng thời tùy biến bằng CSS thực tế.
  • Nó đưa ra một cách mới để dùng Tailwind theo kiểu 'nhẹ nhàng' mà không phải vứt bỏ kiến trúc hiện đại của CSS, cascade, thậm chí cả shadow DOM của web component.

• CTRL+u cho thấy một ví dụ hay về cú pháp.

  • Ví dụ, cần một dòng code trực quan để tạo một hộp bo góc cùng các section trên và dưới.

• Tôi vẫn chưa làm việc với CLI độc lập, nhưng chắc chắn nó sẽ được hoàn thành trước khi phát hành v4.0.

  • Xét phần còn lại của thông báo phát hành, tôi đoán nó sẽ được xây dựng bằng Rust.
  • Tôi thích việc không nhúng Node vào, đặc biệt nếu phải phụ thuộc vào công cụ pkg nay đã bị Vercel bỏ.

• Có rất nhiều cải tiến đầy hứa hẹn.

  • Điều tôi hào hứng nhất là khả năng điều khiển theme bằng CSS thay vì mở rộng qua JS.

• Tôi hy vọng Tailwind sẽ hỗ trợ attributify như unocss.

  • Cách đó dễ đọc hơn nhiều đối với các layout phức tạp.

• Tôi không phải là lập trình viên frontend, nhưng tôi đang duy trì vài website, và tất cả đều dùng Tailwind.

  • Những người duy trì Tailwind có trực giác rất tốt trong việc ưu tiên, đồng thời có gu thiết kế tuyệt vời.
  • Tailwind là thứ khó hiểu trước khi dùng thử, nhưng qua mỗi phiên bản họ đều mang đến một sản phẩm ngày càng tinh luyện hơn.
  • Ở phiên bản này chưa có thay đổi lớn nào về mặt tương thích, nhưng khi version 4 được chính thức hóa thì có thể sẽ có thêm nhiều thay đổi.
  • Triển vọng của engine mới trông rất tuyệt, và việc tăng tốc độ build lúc nào cũng đáng hoan nghênh.

• Tôi tự hỏi liệu có tutorial/guide nào hay về Tailwind không.

• Tôi tự hỏi có ai đang dùng tailwindcss cùng với htmx hay các cách tiếp cận hateoas khác không.

  • Hypertext vốn không nên liên quan đến styling, nhưng thứ như tailwind có thể đi ngược lại điều đó.
  • CSS và hateoas kết hợp hoàn hảo vì markup và styling được tách biệt, nhưng với những thứ như tailwindcss thì tôi tò mò không biết mọi người làm thế nào.

• Tôi muốn dùng nó trong một dự án demo, nhưng import from "node:@tailwindcss/postcss@latest" gây ra lỗi liên quan đến trường exports trong package.json.

  • Dù vậy, bài blog vẫn nói rằng không cần dùng postcss-import, nhưng lại vẫn đưa nó vào dependency.