Tailwind CSS v4

von

CSS-Framework, durch das man auf .css-Dateien verzichten kann. Es bietet, ähnlich wie Bootstrap, zahlreiche Klassen, die direkt ins HTML geschrieben werden. Allerdings standardmäßig weniger high-level. Während Bootstrap im Standard auch Optionen bietet um komplett fertige Elemente zu erstellen, z.B. ein Karussell, bietet Tailwind eher die einfachen Klassen um das Design und responsive Verhalten festzulegen, z.B. p-10 (padding: 2,5rem) oder flex (display: flex).

Es gibt jedoch Framework-Extensions, bspw. daisyUI, die es ermöglichen ebenfalls komplette Elemente zu erstellen.

Übersicht:

  1. Vor- und Nachteile
  2. Installation
  3. Links

1. Vor- und Nachteile

Vorteile:

  • sofort einsatzfähiges System mit Mobile-First-Ansatz
  • ähnlich wie Bootstrap gibt es vordefinierte Klassen, das Design durch Hinzufügen zu HTML-Elementen beeinflussen (pro Klasse eine Regel)
  • minimale Dateigröße der Production-CSS-Files, weil nur wirklich verwendete Klassen composed werden (CSS-Purging)
  • sehr flexibel, durch Möglichkeit individuelle Werte übernehmen zu können
  • bietet einfache Realisierung eines Dark-Mode
  • sehr gute Dokumentation

Nachteile:

  • dynamische Klassen, die erst durch JS hinzugefügt werden, sind nach dem CSS-Purging nicht teil des Production-CSS-Files
  • CDN-Version ist nicht für Production geeignet, weil Optimierungen fehlen
  • standardmässig ohne semantische Klassen, aber bietet Möglichkeit wiederkehrende Klassenfolgen als Custom-Sematik-Klasse anzulegen
  • standardmässig ohne Layoutsystem; Layout muss komplett durch Klassenvergabe vom Entwickler gemacht werden (was eigentlich auch mehr Kontrolle heisst)

Allgemeine Hinweise:

  • möglichst alleine verwenden (ohne eigenes CSS, CSS-Modules oder andere Frameworks)
  • Styling und Layout ausschliesslich über die verfügbaren Tailwind-Klassen implementieren

2. Installation:

per CDN einbinden
  • CDN-URL im <head> einbinden
  • Custom-Variablen für Tailwind in eigener tailwind.config.js anlegen (oder in style-Tag im head)
  • eigene CSS-Dateien nach der CDN-URL einbinden !!!
  • bietet nur eingeschränkten Funktionsumfang !!!
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Playground Tailwind CSS</title>

    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
    <link rel="stylesheet" href="style.css">

    <style type="text/tailwindcss">
      @theme {
        --color-clifford: #da373d; /* adding custom color on variable 'clifford' */
      }
    </style>
  </head>
  <body>
    <h1 class="bg-clifford flex justify-center text-white text-4xl p-20 mt-5"> Tailwind CSS </h1>
    <div class="flex justify-center flex-wrap gap-5">
      <div class="w-auto min-w-100 h-100 bg-blue-400">1</div>
      <div class="w-auto min-w-100 h-100 bg-red-400">2</div>
      <div class="w-auto min-w-100 h-100 bg-green-400">3</div>
      <div class="w-auto min-w-100 h-100 bg-yellow-400">4</div>
      <div class="w-auto min-w-100 h-100 bg-orange-400">5</div>
      <div class="w-auto min-w-100 h-100 bg-slate-500">6</div>
    </div>
  </body>

3. Links:

Dokumentation: https://tailwindcss.com

Extensions:

4. Layout Templates:

Body:

Header sticky, Main 1fr, Footer bottom

Flex

<body class="bg-red-200 min-h-screen flex flex-col">
  <header class="bg-blue-200 h-15 sticky top-0 z-10">header</header>
  <main class="bg-yellow-200 flex-1">main</main>
  <footer class="bg-green-200 h-[7.5rem]">footer</footer>
</body>

Grid

<body class="bg-red-200 min-h-screen grid grid-rows-[auto_1fr_auto]">
  <header class="bg-blue-200 h-[3.75rem] sticky top-0 z-10">header</header>
  <main class="bg-yellow-200">main</main>
  <footer class="bg-green-200 h-[7.5rem]">footer</footer>
</body>
…

Backlog:

node extension: prettier tailwind class sorter