|

Übersichtliche Tailwind-Klassen durch den WindiCSS Attributify Mode

Tailwind ist super, aber es gibt auch Nachteile. Zum Beispiel kann es durch die vielen CSS Klassen im HTML sehr schnell, sehr unübersichtlich werden.
Das CSS Utility Framework WindiCSS versucht dieses Problem mit dem "Attributify Mode" zu lösen. WindiCSS ist kurz gesagt Tailwind mit Steroiden. Es bringt zahlreiche weitere Funktionen mit und ist dabei voll Tailwind kompatibel.

Ein Beispiel aus der Tailwind-Welt

Ein einfacher Button kann schnell sehr viele Klassen haben:

<button 
  class="bg-blue-400 hover:bg-blue-500 dark:bg-blue-500 dark:hover:bg-blue-600 text-sm text-white font-mono font-light py-2 px-4 border-2 border-rounded border-blue-200"
>
  Button
</button>

So entsteht sehr schnell ein Haufen von Klassennamen und es ist schlecht erkennbar bzw. nicht sofort erkennbar welche Klassen enthalten sind.

WindiCSS' Attributify Mode

Der Attributify Mode von WindiCSS soll dieses Problem beseitigen. Die unübersichtlichen Button Klassen werden dann in diese leichter lesbare Syntax überführt:

<button 
  bg="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600"
  text="sm white"
  font="mono light"
  p="y-2 x-4"
  border="2 rounded blue-200"
>
  Button
</button>

Dabei funktioniert sowohl das Gruppieren nach Utilities wie im Beispiel aber auch das Gruppieren nach Varianten.

Utility Gruppierung

class=...
bg=...
text=...
border=...

Varianten Gruppierung

class=...
sm=...
md=...
dark=...

Es ist auch möglich beide Paradigmen zu kombinieren. Dies wird jedoch von den Entwicklern nicht empfohlen.

WindiCSS bringt noch viele andere tolle Features mit. Nachzulesen auf: https://windicss.org/features/