UI Elemente mit Tailwind

Ein Input-Feld, Dropdown, Dialog oder gar Datepicker nur mit HTML und CSS (beziehungsweise Tailwind) zu entwickeln, ist oft unnötig zeitaufwendig. Hier sind einige Alternativen, die besser geeignet sind:

1. Form-Plugin von Tailwind CSS

Wenn du nur ein paar Eingabefelder stylen möchtest, kannst du das Form-Plugin von Tailwind verwenden. Damit erhalten die Inputs ein neutrales Styling, welches mit Tailwind angepasst werden kann. Für manche Projekte ist das völlig ausreichend.

• Tailwind CSS Plugins

2. Headless UI Bibliothek

Wenn ein Projekt Dialoge oder gar einen Datepicker benötigt, sollte auf eigenes HTML und CSS verzichtet werden. Neben dem hohen Zeitaufwand ist auch der Aspekt der Barrierefreiheit nicht zu unterschätzen. Ein Element nur für Bildschirm und Maus bedienbar zu machen ist eine Sache, aber meistens sollten diese Elemente auch für Touch, Screenreader und Tastatur funktionieren. Das ist auf die Schnelle nicht möglich.

Zum Glück gibt es aber für viele Renderbibliotheken (React, Vue, usw.) mittlerweile gute Headless UI Sammlungen. Headless UIs sind Elemente, die die gesamte Logik und das Verhalten der Elemente enthalten, aber überhaupt kein Styling. Sie funktionieren also direkt für Bildschirm, Maus, Touch, Screenreader und Tastatur und müssen “nur” noch gestylt werden. Das Styling ist zwar immer noch ein Aufwand, aber zumindest muss das Verhalten nicht selbst entwickelt werden.

Gute Headless UI Bibliotheken mit Fokus auf React sind:

• Radix UI
• Headless UI
• React Aria von Adobe

React Aria ist für sehr komplexe Projekte gedacht, bei denen jeder Aspekt eines Elements beeinflusst werden muss. Für die meisten Projekte ist Headless UI und vor allem Radix UI vorzuziehen.

3. shadcn/ui

Headless UIs beschleunigen und unterstützen die Entwicklung von UI-Elementen enorm, erfordern aber immer noch manuelles Styling mittels CSS. Wenn man mit einem Basisstil beginnen und diesen für ein Projekt leicht ändern möchte, ist shadcn/ui eine gute Wahl. Im Gegensatz zu anderen Sammlungen wie MUI, Mantine, Chakra oder Ant-Design kopiert man diese Elemente direkt in das Projekt und kann sie nach Belieben anpassen. Diese Elemente sind dann Teil des Projektes und werden genau für dieses Projekt angepasst. In den Elementen verwendet shadcn/ui ebenfalls *Tailwind CSS* und Radix UI.

• shadcn/ui

4. Bestehende Sammlung nutzen

Neben den oben genannten Optionen, ist es eine bestehende Sammlung auch eine valide Option. Im Gegensatz zu den anderen Optionen ist man hier darauf angewiesen, dass die Sammlung die benötigten Funktionen und den gewünschten Stil unterstützt. Da man im Laufe des Projektes sowieso auch Elemente oder Funktionen von Elementen benötigt, die die Sammlung nicht anbietet, muss man dann doch wieder Elemente selbst bauen. In diesem Fall ist es nicht möglich, die Elemente umzubauen oder nur Teile der Elemente zu verwenden. Daher ist shadcn/ui in vielen Projekten sinnvoller.

• MUI
• Mantine
• Chakra
• Ant-Design