Zum Hauptinhalt springen
Version: Material

Tailwind

Highlights
  • Hohe Flexibilität für individuelles Design
  • Gute Performance
  • Wachsende Beliebtheit bei modernen Projekten
Nachteile
  • "vollgestopfte" HTML-Klassen
  • Lesbarkeit des HTML leidet bei komplexen Layouts ("Spaghetti")
  • Fehlende standardisierte Komponenten (Buttons, Modale etc. selbst bauen)

👉 Tailwind CSS ist ein CSS-Framework, das auf Utility-Klassen basiert. Anstatt eigene CSS-Klassen zu definieren, verwendet man vordefinierte Klassen, um das Styling direkt im HTML zu gestalten.

Damit dies funktioniert, muss im <head>-Bereich der HTML-Datei das Tailwind CSS-Skript eingebunden werden:

<html>
  <head>
      <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
  </head>
  <body>
      ...
  </body>
</html>

Anschliessend können die vordefinierten Tailwind-Klassen verwendet werden, um das Layout und Design der HTML-Elemente zu gestalten.

Reine HTML-Struktur​

<html>
<head>
</head>
<body>
<div>
    <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Maria Grünfelder">
    <div>
        <h1>Maria Grünfelder</h1>
        <address>
            <div>maria.gruenfelder@email.com</div>
            <div>Biel, Schweiz</div>
            <div>+41 32 123 4567</div>
        </address>
    </div>
</div>
</body>
</html>

Mit Tailwind CSS​

<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<body>
<div class="flex items-center gap-x-6 m-5 p-6 bg-linear-to-r from-red-100 to-fuchsia-200 rounded-xl shadow-xl/30">
    <img class="size-30 rounded-full hover:scale-125 duration-300 ease-in border-6 border-solid border-red-300" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Maria Grünfelder">
    <div class="">
        <h1 class="text-xl font-medium">Maria Grünfelder</h1>
        <address class="text-gray-500 not-italic text-sm">
            <div>maria.gruenfelder@email.com</div>
            <div>Biel, Schweiz</div>
            <div>+41 32 123 4567</div>
        </address>
    </div>
</div>
</body>
</html>
CC 4.0
Letztes Update am