Tailwind Plus Menambahkan Dukungan Vanilla JavaScript

• Blok UI Tailwind Plus kini bisa berfungsi penuh hanya dengan Vanilla JavaScript
• Kini dimungkinkan memakai komponen interaktif tanpa framework seperti React atau Vue
• Kini tersedia library berbasis custom element baru bernama @tailwindplus/elements
• Ditekankan kemudahan pakai dengan kompatibilitas terhadap berbagai platform dan framework
• Semua pelanggan Tailwind Plus bisa langsung menggunakan fitur ini sekarang

---

Tailwind Plus Menghadirkan Dukungan Vanilla JavaScript

Banyak blok UI Tailwind Plus (misalnya dialog, dropdown, command palette) pada praktiknya memerlukan JavaScript agar benar-benar bisa digunakan. Sebelumnya, jika bukan pengguna React atau Vue, pengguna harus menulis sendiri JavaScript untuk menangani interaksi pada blok UI tersebut.

Namun sekarang, semua blok UI memiliki fungsionalitas lengkap, aksesibilitas, dan elemen interaktif sehingga langsung berfungsi bahkan pada contoh Plain HTML. Artinya, tanpa bergantung pada framework JavaScript, berbagai blok antarmuka seperti dropdown, command palette, dialog, dan drawer bisa digunakan di mana saja dalam proyek.

@tailwindplus/elements: Library Inti

Perubahan ini dimungkinkan oleh library @tailwindplus/elements. Library ini adalah paket khusus untuk pelanggan Tailwind Plus, berupa kumpulan headless custom element.

• Custom element dapat diterapkan di mana saja hanya dengan menambahkan satu tag <script> ke kode HTML
• Interaksi kompleks, pengelolaan fokus, aksesibilitas keyboard, dan pemberian atribut ARIA ditangani secara otomatis
• Styling dapat dikustomisasi dengan bebas menggunakan utility class Tailwind CSS atau CSS buatan sendiri

Contoh Penggunaan Utama

• Dropdown: disusun dengan custom element seperti <el-dropdown> dan <el-menu>, serta berfungsi tanpa JavaScript tambahan
• Select: komponen pilihan tingkat lanjut dapat dibangun dengan elemen <el-select>, <el-options>, dan <el-option>
• Command palette: fungsionalitas lengkap diwujudkan dengan struktur seperti <el-command-palette> dan <el-command-list>

Custom element ini secara otomatis menangani atribut ARIA, perpindahan fokus, dan navigasi keyboard, sehingga juga sangat mendukung aksesibilitas web.

Integrasi Framework dan Minim Ketergantungan pada Platform

• Dapat diintegrasikan tidak hanya pada lingkungan yang hanya memakai HTML, tetapi juga pada berbagai lingkungan seperti Svelte, Rails (Ruby on Rails), dan React
• Contoh Svelte: disediakan contoh penambahan binding dua arah pada <el-autocomplete>
• Contoh Rails: saat formulir dikirim, nilai <el-select> dikirim ke server seperti kontrol formulir native
• Contoh React: berbeda dari Headless UI dan React Aria yang ada, ini dapat digunakan tanpa ketergantungan pada framework

Standar Web Modern dan Kompatibilitas Browser

• Elements secara aktif memanfaatkan fitur platform web modern seperti Web Components dan Custom Elements untuk menghadirkan konfigurasi ringan dan pengalaman native
• Jika diperlukan, polyfill juga dibundel secara otomatis untuk memastikan cakupan dukungan browser yang sama dengan Tailwind CSS v4
• Seiring standar web makin luas diadopsi, ukuran Elements juga diperkirakan akan menjadi lebih ringan secara alami

Universalitas Sejati: "HTML adalah penyebut bersama terkecil"

HTML adalah "penyebut bersama terkecil" bagi semua framework web, dan dengan Elements, blok UI berbasis HTML dari Tailwind Plus dapat bekerja secara konsisten di lingkungan apa pun

• Disediakan contoh penggunaan nyata dan kode di Svelte, Rails, React, dan lainnya

Rilis dan Akses

• Jika Anda adalah pelanggan Tailwind Plus, Anda bisa langsung menggunakan semua blok UI yang telah diperbarui dan Elements
• Tersedia berbagai demo per kategori UI seperti dropdown dan command palette, serta dokumentasi resmi Elements
• Dapat dikustomisasi dengan cara apa pun sesuai kebutuhan proyek

Penutup

Kini, pengguna Tailwind Plus dapat dengan mudah membangun UI yang kuat dan aksesibel di lingkungan apa pun tanpa perlu menulis JavaScript yang rumit.

[GN⁺]

Komentar Hacker News

• Saat melihat penamaan class Tailwind yang panjang dan hierarkis seperti ``, terasa bahwa sekarang kita bukan hanya perlu mempelajari CSS, tetapi juga sistem struktur hierarkis lain

  • Setiap kali membuka proyek Tailwind berskala besar, saya selalu takjub melihat daftar atribut class yang sangat panjang dalam satu baris

    
    ...
    
    

  • Sebelum Tailwind, hampir setiap web designer yang saya temui membuat sistem seperti ini dengan caranya sendiri Secara teori CSS sudah cukup kuat dan semua ini sangat mungkin dilakukan tanpa Tailwind Tetapi dalam praktiknya CSS punya kelemahan besar: agar benar-benar maksimal, kita perlu merancang model semantik secara terpisah, sementara para desainer sering kali lebih fokus pada nuansa dan ekspresi emosi daripada struktur dokumen atau arsitektur informasi Sangat sulit, bahkan kadang mustahil, memetakan konsep-konsep emosional semacam ini ke dalam aturan logis di markup Tailwind pada dasarnya hanya meresmikan apa yang selama ini sudah dilakukan semua orang, yaitu alih-alih membuat pemodelan abstrak tentang “makna”, langsung memakai aturan yang bisa diterapkan seperti bold, red

  • Saya penasaran bagaimana bisa ada orang yang melihat kode seperti ini lalu berkata, ‘Wah, ini benar-benar kode yang rapi!’ Saya tidak tahu bagaimana Tailwind bisa menjadi sepopuler ini, dan saya rasa belajar CSS murni itu benar-benar bagus CSS zaman sekarang memang sudah jauh lebih baik

  • Dalam proyek nyata, class biasanya dikelompokkan agar lebih mudah dibaca Contohnya,

    Pengodeannya seperti ini Saat ini masih saya kelompokkan secara manual, tetapi akan bagus kalau ada tool yang bisa mengotomatisasi format seperti ini

  • Tailwind tampaknya awalnya berangkat dari konsep framework CSS bergaya utility class, semacam “Bourbon on Steroids” Namun ternyata orang-orang menerima kode contoh jauh lebih antusias dari perkiraan, lalu memakainya dengan cara ditumpuk begitu saja Pada 2018 saya mencoba memakai Tailwind di proyek besar baru, dan dulu pendekatan seperti menumpuk class berbasis utility Tailwind ke .button, .button-primary itu mudah dirawat dan membuat HTML tetap rapi Tetapi setelah tim benar-benar memakainya, menumpuk utility class bawaan secara langsung ternyata jauh lebih cepat dan mudah Kalau tidak terlalu memikirkan keanggunan kode, desainnya tetap konsisten dan bisa direalisasikan persis seperti yang terlihat di Photoshop Referensi Bourbon

• Ini adalah pendekatan yang menggunakan Web Components berbasis standar web Didukung langsung oleh browser, jadi bisa berjalan tanpa framework JS Menyenangkan melihat para pengembang semakin banyak memanfaatkan Web Components Apa itu Web Components? (MDN)

  • Ini perubahan yang sudah lama ditunggu Dulu saya bermain-main dengan Web Components di proyek pribadi ketika belum terlalu peduli kompatibilitas, dan sekarang melihatnya diadopsi juga oleh library arus utama benar-benar menyenangkan

  • Saya sudah 12 tahun mengatakan bahwa Web Components itu perlu, tetapi kubu framework seperti React, Angular, Svelte, dan lainnya tampak tidak terlalu antusias Web Components ditambah JS/TS yang terisolasi dan bundler seperti vite atau rollup saja sudah cukup, tidak perlu overhead yang tidak perlu seperti Shadow DOM atau rerender penuh

  • Saat bermain-main dengan Polymer sekitar 2014, istilah “transclusion” terasa sangat berkesan Waktu itu terdengar keren, tetapi sekarang saya bahkan sudah tidak terlalu ingat artinya

  • Saya pernah mencoba menerapkan Web Components pada hook untuk kode iklan perusahaan, dan secara pribadi saya agak kecewa Memicu eksekusi kode memang mudah, tetapi API-nya sendiri tidak terlalu bagus

• Melihat dunia komponen UI populer, saya sering bertanya-tanya mengapa fondasinya tidak semuanya ‘headless’ Web Components sudah ada sejak lama, jadi aneh rasanya pendekatan seperti ini tidak menjadi hal yang umum Library per framework (seperti SHADCN dan sebagainya) membuat dokumentasi masing-masing sesuai kompatibilitas versinya, terikat pada lingkungan tertentu, dan pada praktiknya juga tidak terlalu matang Rasanya akan lebih baik jika dibangun di atas Headless UI, lalu bila perlu membuat wrapper khusus per framework Tentu saya tahu kenyataannya jauh lebih kompleks, tetapi saya membayangkan dunia seperti itu

  • Di framework populer seperti React, Vue, Svelte, dan lainnya, Web Components pada dasarnya hanya overhead dari sisi ukuran bundle dan beban runtime Terutama di React, karena ketidakcocokan paradigma, kita harus menerima pengorbanan pada fungsi atau kegunaan, atau membuat binding yang rumit, sehingga alasan untuk memakai Web Components sejak awal jadi hilang Fitur-fitur canggih seperti SSR juga sering menimbulkan masalah Dalam situasi ketika React begitu dominan, saya tidak terlalu ingin memakai Web Components Dan pendekatan headless juga sering kali rumit di implementasi nyata atau punya overhead besar

• Saya kadang membayangkan kalau ada seseorang yang bisa memberi pendanaan cukup kepada tim Tailwind, dunia akan jauh lebih baik karena kita bisa mendapatkan seluruh ekosistem Tailwind secara gratis tanpa mereka perlu pusing soal uang Sayang sekali begitu banyak peluang integrasi mendalam dengan berbagai tempat seperti Tailwind Plus jadi hilang Ini mengingatkan saya pada masa 37signals menerima investasi dari Jeff Bezos dan terbebas dari kekhawatiran soal VC

  • Tim Tailwind sebenarnya sudah jauh lebih sukses daripada yang dibayangkan orang Keinginan mereka untuk membangun dan berekspansi lebih jauh bukan karena butuh uang, melainkan ambisi yang wajar Kesan saya, Tailwind (open source) hanya satu bagian dari keseluruhan bisnis, dan mereka juga ingin membangun proyek lain yang menghasilkan pendapatan Bisa dibandingkan dengan Laravel

  • Sejujurnya sekarang saya jadi kurang tertarik membeli komponen berbayar seperti Tailwind Plus karena AI bisa dengan mudah menghasilkan komponen Tailwind Dulu pada masa Tailwind UI saya benar-benar membelinya, tetapi sekarang rasanya lebih praktis minta AI seperti Claude untuk langsung membuatkan UI, dan itu juga menghindarkan kekhawatiran soal lisensi Saya penasaran model bisnis seperti apa yang masih akan berhasil ke depannya

  • Soal 37signals, secara pribadi saya malah merasa mungkin akan lebih baik jika para pendirinya bekerja sambil harus melapor kepada seseorang

  • Sebenarnya “seluruh pengalaman Tailwind” sudah tersedia gratis Saya justru bingung integrasi mendalam seperti apa yang dianggap kurang Tailwind Plus (produk komersial) hanyalah kumpulan template siap pakai dan set komponen prebuilt Untuk developer yang ingin mulai dengan cepat memang nyaman, tetapi pada akhirnya semuanya tetap bisa dibuat sendiri hanya dengan Tailwind

  • Saya penasaran integrasi spesifik apa yang dimaksud

• Sebaiknya jangan terlalu bersemangat dulu Dulu mereka juga mendukung Vue, tetapi sekarang tampaknya secara praktis sudah ditinggalkan

  • Inilah bentuk dukungan untuk Vue Framework jumlahnya terlalu banyak sehingga membuat wrapper khusus untuk semuanya nyaris mustahil Dengan memakai Web Components, cukup membangunnya sekali agar bisa berjalan di semua lingkungan, dan pada akhirnya yang dibutuhkan hanya framework yang mendukung Web Components dengan baik — atau pada dasarnya mendukung HTML dengan baik

  • Dukungan Vue terhadap Web Components sangat bagus, dan React 19 akhirnya juga mulai mendukungnya dengan baik Memang benar ekosistem Web Components masih berantakan, tetapi justru kemampuan menyediakan “komponen yang bisa dipakai ulang di semua framework” adalah killer app sejati dari Web Components Saya heran mengapa ini tidak dipromosikan sebagai “sekarang mendukung semua framework” alih-alih “untuk vanilla JavaScript”

  • Mereka juga pernah menjalankan library desain Figma, tetapi sekarang sudah tidak ada Ini contoh yang cukup disayangkan bagi siapa pun yang ingin berkolaborasi dengan desainer

  • Sesuai namanya, arahnya memang tailwindcss

• Saya menganggap use case custom elements seperti ini menarik, tetapi agak aneh karena di Tailwind ini menjadi fitur berbayar Secara naluriah saya justru berharap custom elements gratis, lalu integrasi framework yang berbayar akan terasa lebih masuk akal Kebijakan harga Tailwind Plus

  • Ini berbayar karena pengembangan library ini menelan biaya sekitar $250,000 Akan mustahil memberikannya gratis lalu tetap merawatnya, dan para engineer yang kompeten memang layak mendapat kompensasi yang pantas

  • Tailwind Plus adalah koleksi berbayar berisi komponen UI dan template TailwindCSS sendiri, seperti Bootstrap, hanyalah alat styling

  • Fitur berbayar lain yang terkenal adalah hal seperti SSO Sulit memahami secara intuitif mengapa itu berbayar, tetapi strateginya memang sengaja menunda momen pengambilan keputusan adopsi

  • Menjual hal seperti ini terasa agak aneh Di dunia pengembangan web yang pada dasarnya terbiasa dengan hal gratis, struktur di mana kita harus membayar langganan agar bisa memakai framework seumur hidup bisa terasa ganjil Rasanya seperti jika Postgres meminta biaya pemakaian bulanan Tetapi setelah melihat kebijakan harganya, ternyata ini model pembelian satu kali seumur hidup Saya penasaran seberapa baik model ini akan bekerja

• Sepertinya Alpine.js hilang dari custom block elements di tailwindcss plus Saya kecewa karena alpinejs tidak lagi muncul di contoh kode Sekarang digantikan menjadi

  seperti ini Sebagai pengguna Alpine, sayang sekali saya tidak lagi bisa memakai contoh copas begitu saja

• Saya harap fitur ini juga dibuka untuk pengguna Tailwind gratis Sangat menarik dan saya ingin mencobanya setidaknya sekali, jadi sayang karena bahkan tidak bisa dicicipi secara gratis Namun saya juga tahu bahwa pendanaan open source memang tidak pernah mudah, jadi saya tetap berterima kasih kepada tailwind Suatu hari nanti saya ingin menjadi orang yang menyumbang dan berkontribusi pada open source

• Disebutkan bahwa di Elements kita bisa membuat hal seperti command palette canggih seperti ``, tetapi sebenarnya itu bisa dilakukan karena mereka memang langsung menambahkan fitur tersebut ke komponen itu sendiri

• Setelah belakangan ini lebih banyak memakai Tailwind, saya mulai mengakui bahwa ia punya keunggulan dalam hal kenyamanan dan abstraksi atas kerepotan merancang design system Namun dalam jangka panjang, berinvestasi langsung pada design system dan library komponen buatan sendiri akan menjadi solusi yang jauh lebih solid dari sisi DX, fleksibilitas, bahasa estetika, dan dependensi