Source: Unsplash

Arbeiten mit CSS Utilities – Installation von Tailwind und PostCSS

Jeder kennt sie, jeder nutzt sie – CSS Klassen. Sie helfen uns, eine Gruppe bestimmter Eigenschaften eines HTML Elements einmalig zu definieren und anschließend mehrmals wieder zu verwenden. Doch oftmals werden unnötige Klassen mit redundanten Eigenschaften definiert, nur um entweder das bestehende Layout nicht zu beeinträchtigen, oder um bereits definierte Eigenschaften von anderen Klassen zu überschreiben.

Diese Redundanzen können, über einen längeren Zeitraum gesehen, gravierende Probleme bei der Wartung von Webseiten verursachen. Eine Änderung einer Klassendefinition kann somit auch Auswirkungen auf andere HTML Komponenten haben, was zur Folge haben kann, dass diese dem Nutzer nicht mehr ordnungsgemäß angezeigt werden können. 

Das CSS Framework Tailwind kann hierbei Abhilfe schaffen. Es basiert auf einer Vielzahl vordefinierter CSS Utilities, mit welchen ganze Webseiten erstellt werden können, ohne eine einzige neue CSS Klasse zu definieren. 

Voraussetzungen

Zur Installation von Tailwind müssen folgende Voraussetzungen erfüllt sein:

1. Installation von Tailwind

1.1. Erstellung der package.json Datei

Da Tailwind ein NPM Package ist, muss zuerst die sogenannte package.json über folgenden Terminal-Befehl mit NPM erstellt werden:

$ npm init -y

1.2. Installation der Dependencies Tailwind, PostCSS-CLI und Autoprefixer

Zur Installation der oben genannten Packages ist folgender Befehl notwendig:

$ npm install tailwindcss postcss-cli autoprefixer

1.3. Erstellung der tailwind.config.js Datei mit NPX

Bei der tailwind.config.js Datei handelt es sich um eine Konfigurationsdatei, mit welcher Tailwind ganz einfach an die eigenen Wünsche angepasst werden kann. So können beispielsweise die vordefinierten Farben geändert oder die Schriftart abgeändert werden.

Zur Erstellung der tailwind.config.js Datei ist folgender Befehl erforderlich:

$ npx tailwind init

1.4. Manuelle Erstellung der postcss.config.js Datei

Nachdem die obigen Schritte erfolgreich durchlaufen wurden, muss nun die postcss.config.js Datei im Stammverzeichnis unseres Projekts erstellt werden.

Die Datei muss dann mit folgendem Inhalt gefüllt werden:

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
  ]
}

Hierbei wird ein Objekt mit Plugins erstellt die verwendet werden, um das CSS zu verarbeiten.

1.5. Erstellung der Datei tailwind.css

Innerhalb der tailwind.css Datei werden Marker referenziert, die anschließend durch Tailwind mit automatisch generiertem CSS Code ersetzt werden.

Die tailwind.css Datei kann folgenden Inhalt besitzen:

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

Hierbei werden alle von Tailwind bereitgestellten Base, Components und Utilities Klassen automatisch in die CSS Datei eingebunden.

1.6. Hinzufügen eines Build Scripts zur package.json Datei zur Kompilierung der CSS Datei

Innerhalb der package.json Datei ist folgender Codeausschnitt zu finden:

"scripts": { 
"test": "echo \"Error: no test specified\" && exit 1"
},

Dieser kann durch folgendes PostCSS Build Script ersetzt werden:

"scripts": {
  "build": "postcss css/tailwind.css -o public/build/tailwind.css"
},

Die entsprechenden Ausgabedateien und Speicherorte sind variabel und können somit nach eigenen Wünschen angepasst werden. Die grundlegende Syntax ist unten ersichtlich.

"scripts": {
  "build": "postcss <INPUT DATEI> -o <OUTPUT DATEI>"
},

1.7. Ausführung des Build Scripts zur Erstellung der CSS Datei

Nachdem die obig aufgeführten Schritte erfolgreich durchlaufen wurden, kann durch das Ausführen des Build Scripts die finale CSS Datei erstellt werden.

Dazu ist folgender Befehl notwendig:

$ npm run build

2. Überblick über die Nutzung von Tailwind

2.1. Einbinden der kompilierten tailwind.css Datei in die index.html

Nachdem das oben genannte Build Script ausgeführt wurde, kann nun die tailwind.css Datei, welche sich im Ordner /public/build/tailwind.css befindet in das HTML Dokument eingepflegt werden. 

Dazu kann nun innerhalb des /public Ordners eine neue index.html mit folgendem Inhalt erstellt werden:

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="/build/tailwind.css">
</head>
<body>
  <h1 class="text-4xl font-bold text-center text-blue-500">Hello world!</h1>
</body>
</html>

2.2. Verwendung des NPM Packages Live-Server während der Entwicklungsphase

Während der Entwicklungsphase kann ein eigener lokaler Server durchaus hilfreich sein. Live-Server hat hierbei den Vorteil, dass er den aktuellen Projekt-Tab im Browser nach jedem speichern automatisch neu lädt. Somit kann man sich voll und ganz auf die eigene nächste Webseite konzentrieren.

Um Live-Server global zu installieren, ist lediglich folgender Befehl erforderlich:

$ npm install -g live-server

Nach der Installation kann dann im Projektstammverzeichnis der folgende Befehl ausgeführt werden, der Live-Server startet.

$ live-server public

Der Zusatz public steht hierbei für das Verzeichnis public, in welchem auch die index.html Datei liegt. Live-Server öffnet nun automatisch ein neues Browser Fenster und zeigt den aktuellen gerenderten Inhalt der index.html Datei an.

3.3. Offizielle Tailwind Dokumentation

Eine Übersicht über alle Utility Klassen und sonstigen Komponenten von Tailwind kann unter https://tailwindcss.com/docs eingesehen werden. Die komplette Liste aller Utility Klassen kann über die linke Seitennavigation angezeigt werden.

This article was updated on Juli 25, 2019

Comments