Tailwindcss from scratch

Tailwind CSS im Terminal von Debian Linux installieren

Diese Anleitung beschreibt die einfache Installation von Tailwind CSS ohne Frameworks (z. B. React, Vue usw.), mit dem üblicherweise hilfreichen Zusatz von autoprefixer und postcss.

Voraussetzungen

  • Node.js (v18 oder neuer empfohlen)
  • Ein Terminal mit Zugang zur Shell
  • Grundlegende Kenntnisse im Umgang mit der Kommandozeile

Schritt 1: Node.js installieren (falls noch nicht vorhanden)

Option A: Installation via APT (einfach, aber ggf. veraltet)

sudo apt update
sudo apt install nodejs npm

Option B: Installation via asdf (empfohlen für flexible Versionierung)

  1. asdf installieren (falls noch nicht vorhanden):
git clone https://github.com/asdf-vm/asdf.git ~/.asdf --branch v0.13.1
echo '. "$HOME/.asdf/asdf.sh"' >> ~/.bashrc
echo '. "$HOME/.asdf/completions/asdf.bash"' >> ~/.bashrc
source ~/.bashrc
  1. Node.js-Plugin hinzufügen und gewünschte Version installieren:
asdf plugin add nodejs https://github.com/asdf-vm/asdf-nodejs.git
asdf install nodejs latest
asdf global nodejs latest
  1. Prüfen, ob Node.js korrekt installiert ist:
node -v
npm -v

Schritt 2: Projektordner erstellen

mkdir mein-tailwind-projekt
cd mein-tailwind-projekt

Schritt 3: Projekt initialisieren

npm init -y

Schritt 4: Tailwind CSS via CLI installieren

npm install -D tailwindcss
npx tailwindcss init

Dadurch wird eine tailwind.config.js-Datei erstellt.

Schritt 5: Projektstruktur anlegen

mkdir -p src/css
touch src/css/input.css
touch index.html

Inhalt von src/css/input.css:

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

Beispielinhalt für index.html:

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="output.css" rel="stylesheet">
  <title>Tailwind-Test</title>
</head>
<body class="bg-gray-100 text-center p-8">
  <h1 class="text-3xl font-bold text-blue-600">Hallo Tailwind!</h1>
</body>
</html>

Schritt 6: Tailwind CSS kompilieren und beobachten

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

Diese Anweisung baut die output.css und beobachtet die Quelldateien auf Änderungen.

(Optional, empfohlen): PostCSS & Autoprefixer für maximale Browser-Kompatibilität

Was ist PostCSS und wozu braucht man Autoprefixer?
PostCSS ist ein Tool, mit dem du CSS nachträglich automatisch verarbeiten kannst. Das wichtigste Plugin dafür ist Autoprefixer: Es fügt deinem CSS automatisch alle notwendigen Vendor-Prefixes wie -webkit-, -ms-, -moz- hinzu. Damit funktioniert dein CSS zuverlässig auch in älteren oder exotischen Browsern, ohne dass du dich manuell um Prefixes kümmern musst.

Tailwind CSS verwendet PostCSS bereits intern, aber für professionelle Projekte ist eine eigene Konfiguration und die explizite Nutzung von Autoprefixer Best Practice.

Schritt 7: PostCSS und Autoprefixer installieren

npm install -D postcss autoprefixer

Erstelle jetzt eine Datei postcss.config.js im Projektverzeichnis mit folgendem Inhalt:

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

Mit dieser Konfiguration sorgt Autoprefixer automatisch für alle wichtigen Vendor Prefixes im generierten CSS.

Tipp: Wenn du wie in Schritt 6 das CLI-Kommando nutzt, erkennt Tailwind die postcss.config.js automatisch – es sind keine weiteren Anpassungen am Build-Kommando nötig.

Fertig

Du kannst nun index.html im Browser öffnen, um dein Tailwind-Projekt in Aktion zu sehen.

Mit PostCSS & Autoprefixer bist du jetzt zusätzlich auf der sicheren Seite, dass dein CSS möglichst in allen modernen und älteren Browsern funktioniert – ohne dass du Prefixes selber schreiben musst.

Weiterführende Links