UnoCSS: Eine wahre TailwindCSS Alternative

Es gibt jetzt schon viele Alternativen zum beliebten CSS Framework TailwindCSS, wie zum Beispiel WindiCSS, Twind oder Tachyons. In diesem Blogeintrag möchte ich dir eine weiter Option vorstellen, und zwar ist das eine relativ neue Bibliothek names UnoCSS. Ich erhoffe mir, dass du es bis am Ende dieses Posts in Erwägung ziehen kannst, für dein nächstes Projekt UnoCSS anstatt TailwindCSS zu verwenden.

Was ist UnoCSS?

UnoCSS beschreibt sich als eine “Atomic CSS engine”. Atomic CSS ist eine CSS Architektur, bei welcher jede CSS-Klasse nur einen klar definierten Effekt hat. Ein Beispiel von Atomic CSS-Klassen sind die Klassen die du in TailwindCSS findest. Als Beispiel:

.bg-white {
	background-color: rgb(255 255 255);
}
.border {
	border-width: 1px;
}

Falls du schonmal Tailwind oder ähnliches verwendet hast, dann weisst du vermutlich schon, wie solche Klasses sehr nützlich sein können, um dein HTML schnell und wartbar zu stylen.

Verglichen mit TailwindCSS, beinhaltet UnoCSS aber keinerlei solcher Klassen. UnoCSS ist mehr ein Meta-Framework, welches dir erlaubt, Atomic CSS-Frameworks wie TailwindCSS zu bauen. Um zum Beispiel, um eine Klasse wie die oben erwähnte bg-white in UnoCSS zu implementieren, könnten wir folgende Konfiguration erstellen:

{
  rules: [
    ['bg-white', { "background-color": 'rgb(255 255 255)' }],
  ]
}

Jetzt können wir im Code class="bg-white" schreiben und UnoCSS wird die bg-white Klasse wie oben in unserem CSS ausgeben.

Natürlich wollen wir dies nicht manuell für bg-white, bg-black, bg-red, usw., wiederholen, das wäre sehr mühsam. Zum Glück erlaubt es uns UnoCSS auch, dynamische Regeln zu erstellen. Um das ganze mit einer dynamischen Regel zu implementieren, können wir folgendes machen:

{
  rules: [
    [/^bg-(.+)$/, match => ({ "background-color": match[1] })]
  ]
}

Dieser Code unterstützt zwar im Moment nur CSS Farben mit namen, aber da dies einfach Javscript ist, könnten wir es theoretisch auch erweitern, um ein Mapping zwischen irgendwelchen Farbnamen und CSS color codes zu machen.

Aber all dies tönt nach ziemlich viel Arbeit, nur um ein Feature das TailwindCSS schon hat, nochmals zu implementieren. Zum Glück können wir einfach die Arbeit von jemanden anderen wiederverwenden, und zwar mit dem “preset” Feature von UnoCSS. Presets sind wie ein Bündel von Regeln und anderen Konfigurationswerten die man in seiner eigenen UnoCSS Konfiguration einbinden kann. In unserem Fall hat schon jemand ein UnoCSS Preset mit der ganzen Funktionalität von TailwindCSS erstellt. Dieses Preset heisst @unocss/preset-wind und ist schon im normalen unocss NPM Paket drin. Wir können es in unserer Konfiguration verwenden indem wir es importieren

import { presetWind } from 'unocss';

und dann folgendes zu unserer Konfiguration hinzufügen:

presets: [presetWind()],

Jetzt können wir “fast” die ganze Funktionalität von TailwindCSS und auch WindiCSS verwenden, weil dieses Preset eine Kombination von TailwindCSS und WindiCSS ist. Es implementiert sogar die “Theme” Konfiguration von TailwindCSS, auch wenn sie noch nicht ganz komplett ist.

UnoCSS hat auch noch andere offiziell unterstützte Presets, wie der @unocss/preset-uno Preset, der auch Klassen von Bootstrap und Tachyons beinhaltet oder der @unocss/preset-attributify Preset, der es einem erlaubt, Klassen direkt auf dem HTML Element als Attribute anzugeben. Wie du an diesem letzten Beispiel erkennen kannst, können Presets noch viel mehr wie nur ein paar neue Klassen hinzufügen.

Es gibt auch noch viele weitere, von der Community gepflegte Presets, die zum Beispiel verschiedene TailwindCSS Plugins in UnoCSS implementieren und andere nützliche Dinge machen. Eine Liste von allen offiziellen und von der Community gepflegten Presets findest du hier.

Wieso UnoCSS anstatt TailwindCSS?

Jetzt fragst du dich vielleicht, das tönt ja super, aber das kann TailwindCSS ja alles auch, also wieso sollte ich denn zu UnoCSS wechseln?

So wie ich das sehe, hat UnoCSS zwei grosse Vorteil über TailwindCSS. Erstens, performance. UnoCSS ist einiges schneller wie TailwindCSS oder WindiCSS. Das sieht man gut im Benchmark unten, den ich aus der UnoCSS Doku kopiert habe.

10/21/2021, 2:17:45 PM
1656 utilities | x50 runs

none                            8.75 ms /    0.00 ms 
unocss       v0.0.0            13.72 ms /    4.97 ms (x1.00)
windicss     v3.1.9           980.41 ms /  971.66 ms (x195.36)
tailwindcss  v3.0.0-alpha.1  1258.54 ms / 1249.79 ms (x251.28)

Das ist, weil UnoCSS die Files nicht zu einem AST parsed, so wie das TailwindCSS macht. Und weil UnoCSS als Vite Plugin implementiert ist, muss es nicht einen separaten File Watcher spawnen für alle Quelldateien. Stattdessen kann es einfach die Files transformieren, die Vite ihm gibt.

Zweitens ist UnoCSS einiges flexibler wie TailwindCSS. Weil es nur eine Engine ist anstatt ein ganzes CSS Framework, kannst du selber entscheiden genau welche Features du verwenden willst. Wenn du zum Beispiel in einem gewissen Projekt sehr viel Text stylen musst, kannst du dir überlegen das @unocss/preset-tagify Preset zu installieren. Dieses erlaubt dir Sachen zu machen wie:

<text-red> red text </text-red>
I'm feeling <i-line-md-emoji-grin /> today!

welches zu folgendem kompiliert:

<span class="text-red"> red text </span>
I'm feeling <span class="i-line-md-emoji-grin"></span> today!

Dies ist nur eine der vielen Möglichkeiten, die UnoCSS ermöglicht und wenn die Community weiter wächst und mehr Presets erstellt, dann stehen dir auch immer mehr Features zur Verfügung.

Natürlich ist UnoCSS nicht perfekt und hat im Moment noch ein paar Unschönheiten. Die problematischste ist definitiv die sehr dürftige Dokumentation. Schon nur die Installation in einem Sveltekit Projekt ist ein bisschen schwierig und nur mit ein bisschen Ausprobieren möglich. Aus diesem Grund werden wir auch bald eine Anleitung publizieren, wie man Sveltekit + UnoCSS aufsetzt.

Weiterhin ist es sehr schwierig UnoCSS zu verwenden, ohne zuerst Erfahrung mit TailwindCSS zu haben, weil die Dokumentation die existiert, von dir erwartet das du gewisse Konzepte schon kennst.

Und obwohl UnoCSS fast alle TailwindCSS Features unterstützt, kann es vorkommen, dass du auf gewisse Grenzfälle stossen wirst, die nicht ganz korrekt funktionieren. Auch ist die Theme Konfiguration nicht ganz gleich wie Tailwind und sie hat definitiv keine Dokumentation :D.

Und zum Schluss, die VSCode Erweiterung ist nicht gleich gut wie die von TailwindCSS. Der Autocomplete funktioniert nicht immer korrekt und ist nicht gleich gut wie der von TailwindCSS und manchmal hat sie auch ausserhalb deines HTMLs das Gefühl, Klassennamen zu sehen.

Trotz dieser Probleme ist UnoCSS aber eine wahre Alternative zu TailwindCSS, vor allem wenn du sehr auf auf die, dank besserer Performance, verbesserte lokale Entwicklung oder die zusätzliche Flexibilität wert legst.

Wenn du, nachdem du all dies gelesen hast, auch mal selber UnoCSS ausprobieren möchtest, kannst du auf den UnoCSS Github gehen und die Library herunterladen.