Tailwind CSS

Tailwind CSS in eine Webanwendung integrieren

Tailwind CSS ist ein CSS-Framework, das viele grundlegende Style-Bausteine implementiert, mit denen man auf einfache Weise professionell gestaltete Webseiten aufbauen kann. Ein weiterer Vorteil von Tailwind CSS ist die automatische Erstellung der benötigten CSS-Stylesheets in einer Datei. Es werden konfigurierte Verzeichnisse im Rahmen des Build-Prozesses durchsucht und entsprechend nur in den Dateien angewandte CSS-Klassen auch in der finalen Stylesheet-Datei implementiert. Dadurch wird die Ausgabegröße automatisch immer auf das notwendige Minimum reduziert.

Um Tailwind CSS entsprechend nutzen zu können, wird der Zugriff auf die Konsole benötigt. Das Betriebssystem spielt dabei keine Rolle, da es für alle Systeme Versionen des Tailwind CLI gibt.

Tailwind CLI herunterladen

a) Offiziellen Download durchführen

  • Die Tailwind Releases-Seite ist unter folgendem Link zu finden: https://github.com/tailwindlabs/tailwindcss/releases
  • Die passende Version für das genutzte Betriebssystem wählen:
    • Windows: tailwindcss-windows-x64.exe
    • macOS: tailwindcss-macos-x64
    • Linux: tailwindcss-linux-x64

b) Installation und Vorbereitung

  • Nach dem Herunterladen sollte die Datei in das Projekt-Stammverzeichnis verschoben werden
  • Die Datei sollte in tailwindcss (Windows: tailwindcss.exe) umbenannt werden
  • In Unix-basierten Systemen muss die Datei zudem als ausführbar markiert werden: 
    chmod +x tailwindcss

2. Projektkonfiguration

a) Initialisierung der Tailwind-Konfiguration

./tailwindcss init

Dies erstellt die Datei tailwind.config.js im Projektverzeichnis.

b) Konfigurationsdatei anpassen

Die Konfiguration findet nun in der Datei tailwind.config.js statt. Dort werden die Pfade zu den verwendeten Templates/HTML-Dateien hinterlegt:

module.exports = {
  content: [
    "./src/**/*.php",
    "./public/**/*.php",
    "./templates/**/*.php"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

3. CSS-Eingabedatei erstellen

Die Datei input.css (z.B. in src/css/) anlegen, damit diese als Startpunkt dient

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Hier können Sie eigene benutzerdefinierte Styles hinzufügen */
@layer components {
  .btn-primary {
    @apply bg-blue-500 text-white px-4 py-2 rounded;
  }
}

4. Tailwind kompilieren

Entwicklungsmodus mit Live-Kompilierung

Für die Entwicklung kann mit dem Parameter --watch eine Live-Kompilierung gestartet werden. Hierbei überwacht Tailwind die Dateien und kompiliert bei Änderungen direkt live die CSS-Datei neu.

./tailwindcss -i ./src/css/input.css -o ./public/css/output.css --watch

Produktivmodus (minimiert)

Für den Einsatz in einem Produktivsystem kann mit dem Parameter --minify eine komprimierte, finale Version des CSS-Datei erstellt werden.

./tailwindcss -i ./src/css/input.css -o ./public/css/output.css --minify

5. CSS in das Projekt einbinden

Beispiel in einer PHP-Datei:

<!DOCTYPE html>
<html>
<head>
    <link href="./css/output.css" rel="stylesheet">
</head>
<body>
    <div class="container mx-auto p-4">
        <h1 class="text-2xl font-bold text-blue-600">Hallo Tailwind!</h1>
    </div>
</body>
</html>

Zusätzliche Empfehlungen

Automatisierung

  • Der Kompilierungsbefehl kann in genutzte Build-Skripte des Projekts integriert werden

Performance-Optimierung

  • Der Parameter --minify sollte für Produktionsumgebungen genutzt werden, um die Datei zu komprimieren
  • Die Pfade im Bereich content der Konfiguration sollten präzise definiert sein, um unnötige CSS-Klassen zu vermeiden und so die CSS-Größe zu minimieren

Häufige Fehlerquellen

  • Stellen Sie sicher, dass Pfade korrekt sind
  • Überprüfen Sie Berechtigungen der Dateien
  • Achten Sie auf Groß-/Kleinschreibung bei Pfaden

⤎ Vorheriger Eintrag | Nächster Eintrag ⤏