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:
|
1 2 3 |
<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.
