Tailwind Plus bổ sung hỗ trợ Vanilla JavaScript

 (tailwindcss.com)
1 điểm bởi GN⁺ 2025-07-27 | 1 bình luận | Chia sẻ qua WhatsApp
  • Các khối UI của Tailwind Plus giờ đây có thể hoạt động đầy đủ chỉ với Vanilla JavaScript
  • Giờ đây có thể dùng các component tương tác mà không cần framework như React hay Vue
  • Một thư viện dựa trên custom elements mới mang tên @tailwindplus/elements đã được cung cấp
  • Nhấn mạnh tính tiện dụng với khả năng tương thích cùng nhiều nền tảng và framework khác nhau
  • Mọi khách hàng Tailwind Plus đều có thể sử dụng tính năng này ngay từ bây giờ

Tailwind Plus ra mắt hỗ trợ Vanilla JavaScript

Nhiều khối UI của Tailwind Plus (ví dụ: dialog, dropdown, command palette) trên thực tế cần có JavaScript đi kèm mới có thể dùng được trong môi trường thực tế. Trước đây, nếu không dùng React hoặc Vue, người dùng phải tự viết JavaScript để tạo ra các tương tác cho những khối UI này.

Nhưng giờ đây, tất cả các khối UI đều có đầy đủ chức năng, khả năng truy cập và yếu tố tương tác, đồng thời hoạt động ngay trong các ví dụ HTML thuần. Nói cách khác, bạn có thể sử dụng nhiều khối giao diện như dropdown, command palette, dialog, drawer ở bất kỳ đâu trong dự án mà không cần phụ thuộc vào framework JavaScript.

@tailwindplus/elements: thư viện cốt lõi

Thứ tạo nên thay đổi này chính là thư viện @tailwindplus/elements. Đây là gói dành riêng cho khách hàng Tailwind Plus, đồng thời là một bộ sưu tập headless custom elements.

  • Các custom element có thể được áp dụng ở bất cứ đâu chỉ bằng cách thêm một thẻ <script> vào mã HTML
  • Những phần như tương tác phức tạp, quản lý focus, khả năng truy cập bằng bàn phím và gán thuộc tính ARIA đều được xử lý tự động
  • Việc styling có thể được tùy biến tự do bằng các utility class của Tailwind CSS hoặc CSS tự viết

Ví dụ sử dụng chính

  • Dropdown: được cấu thành từ các custom element như <el-dropdown>, <el-menu>, và hoạt động mà không cần JavaScript riêng
  • Select: có thể xây dựng component chọn nâng cao bằng các element như <el-select>, <el-options>, <el-option>
  • Command palette: có thể triển khai đầy đủ chức năng bằng cấu trúc như <el-command-palette>, <el-command-list>

Các custom element này tự động xử lý thuộc tính ARIA, di chuyển focus và điều hướng bằng bàn phím, nhờ đó hỗ trợ mạnh mẽ cả về khả năng truy cập web.

Tích hợp framework và giảm thiểu phụ thuộc nền tảng

  • Có thể tích hợp không chỉ trong môi trường chỉ dùng HTML mà còn trong nhiều môi trường khác như Svelte, Rails (Ruby on Rails), React
  • Ví dụ Svelte: có cung cấp ví dụ thêm liên kết hai chiều cho <el-autocomplete>
  • Ví dụ Rails: khi gửi form, giá trị của <el-select> sẽ được gửi lên server giống như một form control gốc
  • Ví dụ React: khác với Headless UI hay React Aria hiện có, có thể dùng mà không bị ràng buộc bởi framework

Tiêu chuẩn web hiện đại và khả năng tương thích trình duyệt

  • Elements tận dụng tích cực các tính năng hiện đại của nền tảng web như Web Components, Custom Elements để mang lại cấu hình gọn nhẹ và trải nghiệm gần với native
  • Khi cần, polyfill cũng được tự động bundle để đảm bảo phạm vi hỗ trợ trình duyệt tương đương với Tailwind CSS v4
  • Khi các tiêu chuẩn web ngày càng được phổ biến rộng rãi, dung lượng của Elements cũng được kỳ vọng sẽ tự nhiên nhẹ hơn

Tính phổ quát thực sự: "HTML là mẫu số chung nhỏ nhất"

HTML là "mẫu số chung nhỏ nhất" của mọi web framework, và với Elements, các khối UI dựa trên HTML của Tailwind Plus có thể hoạt động nhất quán trong bất kỳ môi trường nào.

  • Có cung cấp ví dụ thực tế và mã nguồn cho Svelte, Rails, React

Phát hành và hướng dẫn truy cập

  • Nếu là người đăng ký Tailwind Plus, bạn có thể dùng ngay tất cả UI block đã được cập nhật cùng Elements
  • Có cung cấp các ví dụ demo theo từng danh mục UI như dropdown, command palette, cùng tài liệu chính thức của Elements
  • Có thể tùy biến theo cách mong muốn để phù hợp với yêu cầu của dự án

Kết luận

Giờ đây, người dùng Tailwind Plus có thể dễ dàng xây dựng UI mạnh mẽ và có khả năng truy cập cao trong bất kỳ môi trường nào mà không cần tự viết JavaScript phức tạp.

Bài viết liên quan

1 bình luận

 
GN⁺ 2025-07-27
Ý kiến trên Hacker News

  • Khi nhìn vào cách đặt tên class Tailwind dài và có tính phân cấp như ``, tôi có cảm giác giờ đây không chỉ cần học CSS mà còn phải học thêm một hệ thống phân cấp khác nữa

    • Mỗi lần mở một dự án Tailwind quy mô lớn, tôi luôn phải trầm trồ khi thấy một danh sách class cực dài nằm trên một dòng

      
...

    • Trước thời Tailwind, hầu như mọi web designer tôi gặp đều tự xây một hệ thống kiểu này theo cách riêng của họ Về mặt lý thuyết, CSS đã đủ mạnh và hoàn toàn có thể làm được mà không cần Tailwind Nhưng trên thực tế, CSS có một nhược điểm lớn: để phát huy hết sức mạnh thì phải thiết kế riêng một mô hình ngữ nghĩa, trong khi các designer thường tập trung nhiều hơn vào việc truyền tải bầu không khí và cảm xúc hơn là cấu trúc tài liệu hay kiến trúc thông tin Việc mã hóa những khái niệm giàu cảm tính như vậy thành các quy tắc logic trong markup là cực kỳ khó, thậm chí là bất khả thi Tailwind thực chất chỉ là sự chính thức hóa điều mà mọi người vốn đã làm: thay vì mô hình hóa trừu tượng về “ý nghĩa”, chỉ cần dùng ngay các quy tắc áp dụng trực tiếp như bold, red

    • Tôi thật sự thắc mắc kiểu người nào có thể nhìn đoạn code như thế này rồi nói “wow, đây đúng là code sạch!” Tôi không hiểu sao Tailwind lại trở nên phổ biến đến vậy, và tôi vẫn nghĩ học CSS thuần là điều thực sự tốt CSS ngày nay đã tốt hơn rất nhiều

    • Trong các dự án thực tế, người ta thường nhóm các class lại để dễ đọc hơn Ví dụ,

      Họ code theo kiểu như vậy Hiện tại tôi vẫn phân loại thủ công, nhưng sẽ rất tuyệt nếu có công cụ tự động hóa định dạng kiểu này

    • Tailwind dường như ban đầu xuất phát từ kiểu framework CSS theo phong cách utility class, kiểu như “Bourbon on Steroids” Nhưng mọi người lại chấp nhận các đoạn code ví dụ nhiệt tình hơn nhiều so với dự đoán, rồi cứ thế xếp chồng và dùng luôn Năm 2018, tôi đã thử áp dụng Tailwind cho một dự án lớn mới, và trước đây khi xây các class dựa trên utility của Tailwind như .button, .button-primary thì việc bảo trì dễ hơn và HTML cũng sạch hơn Nhưng khi đội ngũ tự dùng thử, họ thấy việc cứ chồng trực tiếp các utility class có sẵn lại nhanh và dễ hơn nhiều Nếu không quá bận tâm đến sự thanh lịch của code, thì thiết kế vẫn nhất quán và có thể tái hiện đúng hệt những gì thấy trong Photoshop Tham khảo Bourbon

  • Đây là cách làm dựa trên Web Components theo chuẩn web Trình duyệt hỗ trợ sẵn nên hoạt động được cả khi không có JS framework Tôi rất vui vì các lập trình viên đang tận dụng Web Components nhiều hơn Web Components là gì? (MDN)

    • Đây là thay đổi mà tôi đã chờ rất lâu Trước đây tôi từng nghịch Web Components trong các dự án cá nhân khi không cần lo về tính tương thích, nên thật sự rất vui khi thấy chúng được đưa vào cả các thư viện mainstream

    • Tôi đã nói về sự cần thiết của Web Components suốt 12 năm, nhưng phía các framework như React, Angular, Svelte thì khá hờ hững Chỉ cần web component, JS/TS có phạm vi rõ ràng và một bundler như vite hoặc rollup là đủ, không cần những overhead vô ích như Shadow DOM hay render lại toàn bộ

    • Khi nghịch Polymer vào khoảng năm 2014, tôi nhớ mình từng rất ấn tượng với thuật ngữ “transclusion” Lúc đó nghe rất kỳ diệu, nhưng giờ thì tôi cũng chẳng còn nhớ nó có nghĩa chính xác là gì

    • Tôi từng thử áp dụng Web Components trong hook cho mã quảng cáo của công ty, nhưng cá nhân thấy hơi thất vọng Việc kích hoạt thực thi code thì dễ, nhưng bản thân API lại không được ổn lắm

  • Khi nhìn vào thế giới UI component phổ biến, tôi luôn thắc mắc tại sao nền tảng ban đầu lại không phải đều là ‘headless’ Web Components đã tồn tại từ lâu, nên tôi thấy lạ vì cách tiếp cận này không phổ biến hơn Các thư viện theo từng framework riêng (như SHADCN, v.v.) phải tự làm tài liệu riêng theo tương thích phiên bản, bị trói vào môi trường cụ thể và trên thực tế thường cũng chưa hoàn thiện lắm Có vẻ sẽ tốt hơn nếu xây trên nền Headless UI trước, rồi nếu cần thì tạo wrapper cho từng framework Dĩ nhiên tôi biết có nhiều vấn đề phức tạp hơn, nhưng vẫn muốn mơ về một thế giới như vậy

    • Với các framework phổ biến như React, Vue, Svelte, Web Components đơn thuần chỉ là overhead về kích thước bundle và chi phí runtime Đặc biệt trong React, vì khác biệt về triết lý nên либо phải chấp nhận mất tính năng hoặc giảm độ tiện dụng, либо phải làm binding rất tinh vi, mà như vậy thì ngay từ đầu lý do dùng Web Components cũng không còn nữa Các tính năng nâng cao như SSR cũng thường phát sinh vấn đề Trong bối cảnh React đang thống trị, tôi không thật sự muốn dùng Web Components Và cách làm headless cũng thường khiến phần triển khai thực tế trở nên phức tạp hoặc tốn overhead

  • Tôi từng tưởng tượng nếu có ai đó rót đủ vốn cho team Tailwind, để họ không còn phải lo chuyện tiền bạc và có thể cung cấp miễn phí toàn bộ hệ sinh thái Tailwind, thì thế giới sẽ tốt đẹp hơn rất nhiều Thật tiếc vì đã bỏ lỡ quá nhiều cơ hội tích hợp sâu với nhiều nơi khác nhau như Tailwind Plus Nó khiến tôi nhớ đến trường hợp 37signals ngày xưa nhận đầu tư từ Jeff Bezos và nhờ vậy không còn phải lo áp lực VC

    • Team Tailwind thực ra đã thành công hơn mức tưởng tượng rất nhiều rồi Việc họ muốn làm thêm và mở rộng hơn không phải vì cần tiền, mà vì tham vọng phát triển là điều tự nhiên Theo ấn tượng của tôi, Tailwind (mã nguồn mở) chỉ là một phần của toàn bộ hoạt động kinh doanh, và họ cũng muốn xây thêm những dự án khác có doanh thu Có thể so sánh phần nào với Laravel

    • Thành thật mà nói, dạo này với AI thì việc tạo component Tailwind đã trở nên rất dễ, nên tôi không còn nhiều động lực mua component trả phí kiểu Tailwind Plus nữa Hồi còn thời Tailwind UI thì tôi thực sự đã bỏ tiền mua, nhưng giờ tôi thà nhờ AI như Claude làm UI trực tiếp còn tiện hơn, lại khỏi phải băn khoăn chuyện giấy phép Tôi cũng tò mò không biết mô hình kinh doanh nào sẽ hiệu quả trong tương lai

    • Về 37signals, cá nhân tôi lại nghĩ có khi sẽ tốt hơn nếu nhà sáng lập phải làm việc trong bối cảnh phải báo cáo cho ai đó

    • Thực ra “toàn bộ trải nghiệm Tailwind” đã được cung cấp miễn phí rồi Tôi không rõ cái gọi là thiếu tích hợp sâu ở đây cụ thể là gì Tailwind Plus (sản phẩm thương mại) chỉ đơn giản là bộ template dựng sẵn và tập hợp component dựng sẵn Nó tiện cho lập trình viên muốn bắt đầu nhanh, nhưng rốt cuộc thì chỉ với Tailwind là đã hoàn toàn có thể tự làm mọi thứ

    • Tôi tò mò không biết cụ thể bạn đang nói tới dạng tích hợp nào

  • Có lẽ không nên quá phấn khích lúc này Trước đây họ cũng từng hỗ trợ Vue, nhưng giờ có vẻ thực chất đã bị bỏ rơi

    • Đây chính là hỗ trợ cho Vue Vì có quá nhiều framework nên gần như không thể tạo custom wrapper cho tất cả Dùng Web Components thì chỉ cần phát triển một lần là chạy được ở mọi môi trường, và cuối cùng chỉ cần framework hỗ trợ tốt Web Components, tức là hỗ trợ tốt HTML, là đủ

    • Vue hỗ trợ Web Components rất tốt, và React 19 cuối cùng cũng bắt đầu hỗ trợ tử tế Dù hệ sinh thái Web Components đúng là khá lộn xộn, nhưng việc cung cấp “component có thể tái sử dụng trên mọi framework” theo cách này mới chính là killer app thực sự của Web Components Tôi ngạc nhiên vì họ không quảng bá nó là “giờ đã hỗ trợ mọi framework” thay vì gọi là “dành cho vanilla JavaScript”

    • Họ cũng từng duy trì cả thư viện thiết kế trên Figma, nhưng giờ thì không còn nữa Đó thật sự là một trường hợp đáng tiếc nếu muốn cộng tác với designer

    • Cái tên của nó vốn đã là tailwindcss

  • Tôi thấy cách ứng dụng custom element như thế này khá thú vị, nhưng hơi khó hiểu khi trong Tailwind đây lại là tính năng trả phí Theo cảm nhận của tôi thì custom element nên là phần miễn phí, còn phần tích hợp framework mới là thứ hợp lý hơn để đem bán Chính sách giá Tailwind Plus

    • Thư viện này được phát triển với chi phí khoảng $250,000 nên nó là sản phẩm trả phí Nếu chỉ phát hành miễn phí rồi tiếp tục bảo trì thì hẳn là không thể làm nổi, và các kỹ sư giỏi xứng đáng được trả công xứng đáng

    • Tailwind Plus là bộ sưu tập trả phí gồm UI component và template Còn bản thân TailwindCSS, giống như Bootstrap, chỉ đơn thuần là công cụ styling

    • Một tính năng trả phí khác nổi tiếng là SSO Khó mà trực giác hiểu ngay vì sao nó lại là tính năng trả phí, nhưng đó là chiến lược cố tình trì hoãn thời điểm ra quyết định triển khai

    • Bán những thứ như thế này có phần hơi lạ Trong thế giới phát triển web vốn mặc định là miễn phí, nếu muốn dùng framework suốt đời mà phải trả phí định kỳ thì sẽ khá kỳ quặc Giống như việc Postgres bắt bạn trả phí hằng tháng vậy Tuy nhiên nhìn vào chính sách giá thì đây lại là mô hình mua một lần dùng trọn đời Tôi cũng tò mò không biết cách này sẽ hiệu quả đến đâu

  • Có vẻ Alpine.js đã biến mất khỏi custom block elements của tailwindcss plus Tôi khá thất vọng khi không còn thấy alpinejs trong các ví dụ code nữa Giờ nó được thay bằng

    theo kiểu như vậy Là người từng dùng Alpine, tôi thấy tiếc vì không còn thể copy-paste các ví dụ nữa

  • Tôi rất mong tính năng này cũng sẽ được mở cho cả người dùng Tailwind miễn phí Nó cực kỳ thú vị và tôi muốn thử một lần, nhưng thật tiếc là bản miễn phí thậm chí không cho trải nghiệm Dù vậy, tôi vẫn biết việc tài trợ cho mã nguồn mở chưa bao giờ dễ dàng, nên vẫn muốn gửi lời cảm ơn tới Tailwind Hy vọng một ngày nào đó tôi cũng có thể trở thành người quyên góp cho mã nguồn mở và là người đóng góp thực sự

  • Người ta nói rằng có thể tạo những thứ như bảng lệnh nâng cao trong Elements kiểu ``, nhưng thực ra điều đó chỉ khả thi vì chính họ đã trực tiếp thêm tính năng đó vào component ấy

  • Gần đây khi dùng Tailwind nhiều hơn, tôi bắt đầu thừa nhận rằng nó có ưu điểm về tính tiện dụng và khả năng trừu tượng hóa sự phiền toái khi thiết kế design system Nhưng về dài hạn, đầu tư trực tiếp vào design system và component library của riêng mình vẫn là giải pháp đầy đủ hơn nhiều về DX, tính linh hoạt, ngôn ngữ thẩm mỹ và mức độ phụ thuộc