Tailwind Plus erhält Unterstützung für Vanilla JavaScript

• Die UI-Blöcke von Tailwind Plus funktionieren jetzt vollständig nur mit Vanilla JavaScript
• Interaktive Komponenten lassen sich nun auch ohne Frameworks wie React oder Vue verwenden
• Mit @tailwindplus/elements steht eine neue Bibliothek auf Basis von Custom Elements bereit
• Hervorgehoben wird die Nutzbarkeit mit verschiedenen Plattformen und Frameworks
• Alle Tailwind-Plus-Kunden können diese Funktion ab sofort nutzen

---

Einführung von Vanilla-JavaScript-Unterstützung in Tailwind Plus

Viele UI-Blöcke von Tailwind Plus, etwa Dialoge, Dropdowns und Command Palettes, sind in der Praxis nur mit begleitendem JavaScript wirklich nutzbar. Bisher mussten Nutzer, die weder React noch Vue einsetzen, das JavaScript für die Interaktionen dieser UI-Blöcke selbst schreiben.

Jetzt verfügen jedoch alle UI-Blöcke auch in den Plain-HTML-Beispielen sofort über vollständige Funktionalität, Barrierefreiheit und interaktive Elemente. Das heißt, verschiedenste Interface-Blöcke wie Dropdowns, Command Palettes, Dialoge und Drawers lassen sich nun überall im Projekt einsetzen, ohne von einem JavaScript-Framework abhängig zu sein.

@tailwindplus/elements: die zentrale Bibliothek

Möglich wird diese Änderung durch die Bibliothek @tailwindplus/elements. Dieses Paket ist exklusiv für Kunden von Tailwind Plus gedacht und besteht aus einer Sammlung headless Custom Elements.

• Die Custom Elements lassen sich überall einsetzen, indem man dem HTML-Code nur eine einzige <script>-Zeile hinzufügt
• Komplexe Interaktionen, Fokusverwaltung, Tastatur-Barrierefreiheit und das Setzen von ARIA-Attributen werden automatisch übernommen
• Das Styling kann frei mit Utility-Klassen von Tailwind CSS oder selbst geschriebenem CSS angepasst werden

Wichtige Einsatzbeispiele

• Dropdowns: Bestehen aus Custom Elements wie <el-dropdown> und <el-menu> und funktionieren ohne zusätzliches JavaScript
• Selects: Mit Elementen wie <el-select>, <el-options> und <el-option> lassen sich fortgeschrittene Auswahl-Komponenten umsetzen
• Command Palettes: Mit Strukturen wie <el-command-palette> und <el-command-list> wird volle Funktionalität bereitgestellt

Diese Custom Elements übernehmen automatisch ARIA-Attribute, Fokuswechsel und Tastaturnavigation und unterstützen damit die Web-Barrierefreiheit besonders stark.

Framework-Integration und minimale Plattformabhängigkeit

• Integration ist nicht nur in reinen HTML-Umgebungen möglich, sondern auch in verschiedenen Setups wie Svelte, Rails (Ruby on Rails) und React
• Svelte: Es wird ein Beispiel für bidirektionales Binding mit <el-autocomplete> gezeigt
• Rails: Beim Absenden eines Formulars wird der Wert von <el-select> wie bei einem nativen Form-Control an den Server übertragen
• React: Anders als Headless UI oder React Aria ist die Nutzung ohne Framework-Bindung möglich

Moderne Webstandards und Browser-Kompatibilität

• Elements nutzt moderne Webplattform-Funktionen wie Web Components und Custom Elements aktiv, um eine schlanke Struktur und ein natives Nutzungserlebnis zu bieten
• Falls nötig, werden Polyfills automatisch mitgebündelt, sodass derselbe Browser-Support wie bei Tailwind CSS v4 erreicht wird
• Je weiter sich Webstandards verbreiten, desto kleiner dürfte auch Elements ganz natürlich werden

Echte Universalität: „HTML ist der kleinste gemeinsame Nenner“

HTML ist der „kleinste gemeinsame Nenner“ aller Web-Frameworks, und mit Elements funktionieren die HTML-basierten UI-Blöcke von Tailwind Plus in jeder Umgebung konsistent.

• Es werden reale Einsatzbeispiele und Code für Svelte, Rails und React bereitgestellt

Veröffentlichung und Zugriff

• Tailwind-Plus-Abonnenten können ab sofort alle aktualisierten UI-Blöcke und Elements nutzen
• Demos für verschiedene UI-Kategorien wie Dropdowns und Command Palettes sowie die offizielle Elements-Dokumentation stehen bereit
• Die Komponenten lassen sich passend zu den Projektanforderungen auf die gewünschte Weise anpassen

Zum Schluss

Tailwind-Plus-Nutzer können nun in jeder gewünschten Umgebung ohne aufwendiges eigenes JavaScript leistungsfähige und barrierefreie UI einfach umsetzen.

[GN⁺]

Hacker-News-Kommentare

• Wenn man lange und hierarchische Tailwind-Class-Namen wie `` sieht, bekommt man das Gefühl, dass man jetzt nicht nur CSS, sondern noch ein weiteres hierarchisches System lernen muss

  • Jedes Mal, wenn ich ein großes Tailwind-Projekt öffne und dann diese riesig langen Listen von class-Attributen in einer einzigen Zeile sehe, staune ich immer wieder

    
    ...
    
    

  • Vor Tailwind hat praktisch jeder Webdesigner solche Systeme auf seine eigene Weise gebaut CSS ist theoretisch leistungsfähig genug, und auch ohne Tailwind ist all das möglich In der Praxis hat CSS aber einen großen Nachteil: Um sein volles Potenzial auszuschöpfen, muss man zusätzlich ein semantisches Modell entwerfen, während Designer sich oft stärker auf Stimmung und emotionale Wirkung konzentrieren als auf Dokumentstruktur oder Informationsarchitektur Solche emotionalen Konzepte als logische Regeln im Markup abzubilden, ist sehr schwierig oder unmöglich Tailwind hat im Grunde nur formalisiert, was ohnehin alle gemacht haben: statt abstrakter Modellierung von „Bedeutung“ einfach direkt anwendbare Regeln wie bold oder red

  • Ich frage mich, wie jemand so einen Code ansehen und sagen kann: „Wow, das ist wirklich sauberer Code!“ Ich verstehe nicht, wie Tailwind so populär werden konnte, und finde, dass es wirklich sinnvoll ist, pures CSS zu lernen Modernes CSS ist heute wirklich viel besser geworden

  • In echten Projekten gruppiert man die Classes am Ende so, dass sie besser lesbar sind Zum Beispiel:

    So in der Art schreibt man das dann Im Moment sortiere ich das noch von Hand, aber ich hätte gern ein Tool, das dieses Format automatisch erzeugt

  • Tailwind scheint ursprünglich als Utility-Class-basierendes CSS-Framework begonnen zu haben, gewissermaßen als „Bourbon on Steroids“ Dann haben die Leute Beispielcode offenbar viel bereitwilliger übernommen als erwartet und ihn einfach genau so weitergestapelt 2018 habe ich Tailwind in einem neuen größeren Projekt ausprobiert; früher war es gut wartbar und das HTML blieb sauber, wenn man Klassen wie .button oder .button-primary auf Basis von Tailwind-Utilities aufgebaut hat Als das Team es dann aber selbst genutzt hat, war es einfach deutlich schneller und leichter, die mitgelieferten Utility-Classes direkt aufzustapeln Wenn man sich nicht um Eleganz im Code kümmert, bekommt man trotzdem ein konsistentes Design und kann Dinge exakt so umsetzen, wie sie in Photoshop aussehen Mehr zu Bourbon

• Das basiert auf Web Components nach Webstandard Da Browser sie nativ unterstützen, funktioniert es auch ohne JS-Framework Es freut mich, dass Entwickler Web Components inzwischen stärker nutzen Was sind Web Components? (MDN)

  • Das ist eine Veränderung, auf die ich lange gewartet habe Früher habe ich in privaten Projekten mit Web Components herumgespielt, wenn mir Kompatibilität egal war, und ich freue mich wirklich, dass jetzt auch Mainstream-Bibliotheken sie übernehmen

  • Ich rede seit 12 Jahren über die Notwendigkeit von Web Components, aber aus dem Lager von Frameworks wie React, Angular oder Svelte kam nur verhaltene Resonanz Web Components plus gekapseltes JS/TS und ein Bundler wie vite oder rollup reichen völlig aus; unnötiger Overhead wie Shadow DOM oder vollständiges Rerendering braucht es nicht

  • Als ich um 2014 mit Polymer herumgespielt habe, fand ich den Begriff „transclusion“ einprägsam Damals wirkte das irgendwie faszinierend, aber heute erinnere ich mich kaum noch daran, was es genau bedeutete

  • Ich habe Web Components in Hooks für Werbecode im Unternehmen ausprobiert und war persönlich eher enttäuscht Das Auslösen der Codeausführung ist einfach, aber die API selbst ist nicht besonders gut

• Wenn man sich die Welt populärer UI-Komponenten ansieht, fragt man sich, warum die Basis nicht von Anfang an überall „headless“ war Web Components gibt es schon lange, deshalb wirkt es seltsam, dass dieser Ansatz nicht üblicher war Framework-spezifische Bibliotheken wie SHADCN pflegen je nach Versionskompatibilität ihre eigene Dokumentation, sind an bestimmte Umgebungen gebunden und in der Praxis oft weniger ausgereift Es wäre vermutlich besser, eine Basis auf Headless UI aufzubauen und bei Bedarf Wrapper pro Framework zu erstellen Natürlich ist mir klar, dass die Realität komplexer ist, aber so eine Welt fände ich schön

  • In populären Frameworks wie React, Vue oder Svelte sind Web Components hinsichtlich Bundle-Größe und Runtime-Last einfach zusätzlicher Overhead Gerade in React führt der Widerspruch im Modell dazu, dass man entweder Funktionalität oder Nutzbarkeit einbüßt oder aufwendige Bindings bauen muss, womit der Sinn von Web Components von vornherein verloren geht Auch bei fortgeschrittenen Funktionen wie SSR gibt es oft Probleme In einer von React dominierten Welt würde ich nicht unbedingt Web Components verwenden wollen Und Headless-Ansätze sind in der tatsächlichen Umsetzung oft komplex oder mit Overhead verbunden

• Manchmal stelle ich mir vor, jemand würde dem Tailwind-Team genug Geld geben, damit die ganze Tailwind-Welt kostenlos werden kann, ohne dass sie sich ums Geld sorgen müssen Es ist schade, dass so viele Chancen auf tiefe Integrationen mit Dingen wie Tailwind Plus verloren gegangen sind Das erinnert mich an das frühere Beispiel von 37signals, die durch ein Investment von Jeff Bezos von VC-Sorgen befreit waren

  • Das Tailwind-Team ist schon jetzt erfolgreicher, als man es sich leicht vorstellen würde Dass sie mehr bauen und weiter expandieren wollen, liegt nicht daran, dass ihnen das Geld fehlt, sondern an natürlichem Ehrgeiz Mein Eindruck ist, dass Tailwind als Open Source nur ein Teil des gesamten Geschäfts ist und sie zusätzlich weitere umsatzbringende Projekte aufbauen wollen Das ist durchaus mit Laravel vergleichbar

  • Ehrlich gesagt ist mein Wunsch, für kostenpflichtige Komponenten wie Tailwind Plus zu zahlen, heute kleiner geworden, weil man Tailwind-Komponenten mit KI leicht generieren kann Zur Zeit von Tailwind UI habe ich tatsächlich dafür bezahlt, aber heute bitte ich lieber direkt eine KI wie Claude, mir eine UI zu bauen; dann muss ich mir auch keine Gedanken um Lizenzen machen Ich bin gespannt, welches Geschäftsmodell in Zukunft funktionieren wird

  • Was 37signals betrifft, denke ich persönlich manchmal, dass es für die Gründer vielleicht sogar besser gewesen wäre, wenn sie jemandem hätten Rechenschaft ablegen müssen

  • Eigentlich ist die gesamte „Tailwind-Erfahrung“ bereits kostenlos verfügbar Ich frage mich daher, was mit fehlenden tiefen Integrationen konkret gemeint ist Tailwind Plus, also das kommerzielle Produkt, ist letztlich nur eine Sammlung sofort nutzbarer Templates und vorgefertigter Komponenten Für Entwickler, die schnell loslegen wollen, ist das praktisch, aber am Ende kann man alles auch selbst bauen, solange man Tailwind hat

  • Ich würde gern wissen, welche konkreten Integrationen damit gemeint sind

• Ich würde mich an dieser Stelle noch nicht zu sehr freuen Früher wurde auch Vue unterstützt, aber das scheint inzwischen faktisch aufgegeben worden zu sein

  • Genau das ist doch die Vue-Unterstützung Es gibt inzwischen so viele Frameworks, dass es fast unmöglich ist, für alle maßgeschneiderte Wrapper zu bauen Mit Web Components entwickelt man einmal und kann es überall laufen lassen; am Ende reicht es, wenn Frameworks Web Components gut unterstützen, also letztlich HTML gut unterstützen

  • Die Web-Components-Unterstützung in Vue ist sehr gut, und React 19 fängt endlich ebenfalls an, sie ordentlich zu unterstützen Das Ökosystem rund um Web Components ist zwar chaotisch, aber genau diese Art von „Komponenten, die sich in allen Frameworks wiederverwenden lassen“, ist die eigentliche Killeranwendung von Web Components Es überrascht mich, dass das nicht als „jetzt Unterstützung für alle Frameworks“ beworben wird, statt als „für Vanilla JavaScript“

  • Sie hatten auch einmal eine Figma-Designbibliothek, aber die ist inzwischen verschwunden Für die Zusammenarbeit mit Designern ist das wirklich schade

  • Der Name sagt es schon: Es geht um tailwindcss

• Ich fand diesen Einsatzfall für Custom Elements interessant, aber bei Tailwind ist das eine Bezahlfunktion, was ich etwas absurd finde Intuitiv würde ich eher erwarten, dass Custom Elements kostenlos sind und nur die Framework-Integrationen kostenpflichtig Preismodell von Tailwind Plus

  • Es kostet Geld, weil die Entwicklung dieser Bibliothek ungefähr $250,000 gekostet hat Kostenlos bereitzustellen und zu warten wäre schlicht nicht möglich gewesen, und gute Engineers sollten fair bezahlt werden

  • Tailwind Plus ist eine kostenpflichtige Sammlung von UI-Komponenten und Templates TailwindCSS selbst ist wie Bootstrap letztlich nur ein Styling-Werkzeug

  • Eine weitere bekannte Bezahlfunktion ist zum Beispiel SSO Intuitiv wirkt nicht sofort einleuchtend, warum so etwas kostenpflichtig ist, aber die Strategie dahinter besteht wohl darin, den Entscheidungszeitpunkt für die Einführung bewusst nach hinten zu verschieben

  • So etwas gegen Geld zu verkaufen wirkt etwas merkwürdig In der Webentwicklungswelt, in der kostenlos oft die Norm ist, kann es seltsam wirken, wenn man für die lebenslange Nutzung eines Frameworks zahlen soll Das wäre ein bisschen so, als würde Postgres eine monatliche Nutzungsgebühr verlangen Andererseits sieht das Preismodell nach einem einmaligen Kauf für lebenslange Nutzung aus Ich bin gespannt, wie gut dieses Modell funktioniert

• Es sieht so aus, als wäre Alpine.js aus den Custom Block Elements von tailwindcss plus verschwunden Ich war enttäuscht, in den Codebeispielen kein alpinejs mehr zu sehen Jetzt wurde es eher durch so etwas ersetzt:

  Als jemand, der Alpine genutzt hat, finde ich es schade, dass man die Copy-&-Paste-Beispiele nicht mehr direkt verwenden kann

• Ich wünschte, diese Funktion wäre auch für Nutzer der kostenlosen Tailwind-Version zugänglich Das ist wirklich interessant, und ich würde es gern einmal ausprobieren, aber schade, dass man es kostenlos nicht einmal testen kann Trotzdem bin ich Tailwind dankbar, weil ich weiß, wie schwer nachhaltige Finanzierung für Open Source immer ist Ich hoffe, dass ich eines Tages selbst jemand werde, der an Open Source spendet und dazu beiträgt

• Es heißt, man könne mit Elements Dinge wie eine fortgeschrittene Command Palette in der Art von `` bauen, aber das ist nur deshalb möglich, weil genau diese Funktion direkt in diese Komponente eingebaut wurde

• Nachdem ich Tailwind in letzter Zeit häufiger verwendet habe, erkenne ich an, dass es Vorteile bei der Bequemlichkeit hat und die Mühe der Gestaltung eines Designsystems abstrahiert Langfristig ist es jedoch eine deutlich solidere Lösung, direkt in das eigene Designsystem und die eigene Komponentenbibliothek zu investieren — in Bezug auf DX, Flexibilität, ästhetische Sprache und Abhängigkeiten