TailwindCSS, utility first! CSS einmal anders

Dieser Beitrag soll eine kurze Einführung in TailwindCSS geben. TailwindCSS (nachfolgend Tailwind genannt) ist ein utility-first CSS Framework. Das bedeutet, dass es dem Benutzer Utility-Klassen zur Verfügung stellt, mit denen er eigene Designs erstellt. Eine Utility-Klasse ist selbst-beschreibend und kümmert sich immer um eine spezifische Sache (z.B. welche Farbe). Sie kann beliebig oft verwendet werden und wird direkt im HTML eingesetzt. 

Hier ein kurzes Beispiel: 

<button class="bg-orange-500 hover:bg-orange-700 text-white font-bold py-2 px-4 rounded"> 
  Noser 
</button>

Dieser Code generiert einen Button mit orangem Hintergrund («bg» für Background), der durch die Zahl hinten am «bg-orange» heller bzw. dunkler wird. «py» steht für Padding y-Achse, also für das Padding oben und unten, und «px» für die x-Achse. Der Rest ist selbsterklärend. Dadurch wird nur über das Lesen der CSS Klassen schnell klar, wie dieser Button aussieht. 

Key-Features

Responsive 

Man kann jedem Utility einen responsive Prefix voranstellen. Die vordefinierten Prefixes sind sm (640px), md (768px), lg (1024px) und xl (1280px). Das sieht dann so aus: 

<button class="bg-orange-500 sm:bg-blue-500 md:bg-yellow-500 lg:bg-red-500 xl:bg-green-500"> 
  Noser 
</button>

Das heisst im Beispiel wechselt der Button die Farbe je nach Grösse des Browserfensters. Dadurch erscheint der Button in unterschiedlichen Farben je nach Gerät. Das funktioniert für jede Utility, die Tailwind anbietet und macht Responsive Design sehr einfach. 

Tailwind wählt dabei einen Mobile-first Ansatz. Dies bedeutet, dass der Style jeweils für Fenster gilt, die grösser als der gewählte Breakpoint sind. Das heisst, dass für mobile Geräte die Angabe ohne Prefix («bg-orange» im Beispiel) verwendet wird.

Komponenten 

Um das Styling der Elemente wiederverwendbar zu machen, können eigene Komponenten definiert werden. Diese werden dann wie normale CSS-Klassen verwendet. 

<button class="btn btn-noser"> 
  Noser 
</button> 

<style> 
  .btn { 
    @apply font-bold py-2 px-4 ml-5 rounded; 
  } 

  .btn-noser { 
    @apply bg-orange-500 text-white; 
  } 
 
  .btn-noser:hover { 
    @apply bg-orange-700; 
  } 
</style>

Tailwind bietet auch eigene Komponenten an, die man kopieren und adaptieren kann. Darunter findet man unter anderem Navigation, Toggle-Button und viele mehr. 

Anpassbarkeit 

Wie oben erwähnt ist Tailwind dazu da, dem Benutzer möglichst viele Freiheiten zu bieten. Steuern kann man das über ein Config-File («tailwind.config.js»), das aus unterschiedlichen Sektionen besteht. Man muss dabei nur die Dinge spezifizieren, die man anders möchte als die Default-Konfiguration vorgibt.  

Die Sektion, die wahrscheinlich am Häufigsten genutzt wird, ist «Theme», die alle visuellen Änderungen beinhaltet wie Farben, Schriftarten, Breakpoints, etc.  

// tailwind.config.js 
module.exports = { 
  theme: { 
    screens: { 
      sm: '640px', 
      md: '768px', 
      lg: '1024px', 
      xl: '1280px', 
    }, 
    fontFamily: { 
      display: ['Gilroy', 'sans-serif'], 
      body: ['Graphik', 'sans-serif'], 
    }, 
    colors: { 
        cyan: '#9cdbff', 
    } 
  } 
};

Vorteile 

• Flexibilität 
  • Eigene Utilities schreiben 
  • Eigene Komponenten–Styles für Wiederverwendbarkeit 
  • Viele andere Konfigurationen (Breakpoints, etc.) 
• Konsistentes Design 
  • Vordefinierte Farben, Paddings, usw. 
• Einfaches Responsive Design
• Keine gesuchten und überlangen CSS-Klassennamen (wie z.B. filter-list-menu-container)
• CSS–Dateien wachsen nicht bei jeder Änderung 
• Weniger Seiteneffekte, da weniger bis gar keine globale Styles eingesetzt werden 
• Sehr gute Dokumentation
  

Nachteile 

• Lesbarkeit (HTML wirkt überfüllt) 
• CSS Dateien, die generiert werden, sind sehr gross 
  • Kann mit PurgeCSS kleiner gemacht werden (was über Config-Datei gesteuert werden kann) 
• HTML muss «purgeable» sein 
  • class=»text-{{ error ? ‹red‹ : ‹green‹ }}-600″ würde nicht funktionieren  
• Mehr initialer Aufwand 
  • Man muss am Anfang oft in der Doku die richtigen Utilities suchen 
  • Viele Plugins für zusätzliche Funktionen
• Späteres (aus)wechseln wird sehr mühsam 

Vergleiche 

Component-first (Bootstrap) 

Component-first CSS Frameworks liefern bereits vordefinierte Komponenten wie Buttons, etc. die dann in allen Applikationen gleich aussehen. Wenn man keine eigenen Designs einfliessen lässt, ist das definitiv ein guter und einfacher Weg schnell etwas Schönes zu präsentieren. Man ist aber im Gegenteil zu Tailwind eingeschränkter, eigene Designs einfliessen zu lassen. 

Inline-Styles 

Man könnte sagen, dass man auch gleich Inline-Styles verwenden könnte, da Tailwind ein bisschen danach aussieht. Dadurch verliert man aber zum Beispiel das Caching der CSS-Dateien, welches Tailwind immer noch unterstützt. Zusätzlich hat man bei Tailwind vordefinierte Eigenschaften (Paddings, Farben, etc.), die man in der ganzen Applikation konsistent verwendet. 

Fazit 

Grundsätzlich haben alle Varianten ihre Vor- und Nachteile. Schliesslich ist es auch Geschmackssache, mit was man lieber arbeitet und produktiver ist. Die Balance zwischen konsistentem Design und trotzdem hoher Flexibilität von Tailwind kann jedoch ein grosser Vorteil sein.

Im folgenden Blogbeitrag erklärt der Erfinder von Tailwind, wie und vor allem warum er Tailwind eingeführt hat. 

Links 

https://tailwindcss.com/