Schritt 1: Erstelle das Projektverzeichnis
Erstelle ein neues Verzeichnis für dein Projekt und navigiere in dieses Verzeichnis.
bash
mkdir my-tailwind-project cd my-tailwind-project
Schritt 2: Initialisiere das Projekt mit npm
Initialisiere ein neues npm-Projekt. Dies erstellt eine package.json-Datei in deinem Projektverzeichnis.
bash
npm init -y
Schritt 3: Installiere Tailwind CSS
Installiere Tailwind CSS und seine Abhängigkeiten über npm.
bash
npm install tailwindcss postcss autoprefixer
Schritt 4: Initialisiere Tailwind CSS
Erstelle die Konfigurationsdateien für Tailwind CSS und PostCSS.
bash
npx tailwindcss init -p
Dies erstellt zwei Dateien: tailwind.config.js und postcss.config.js.
Schritt 5: Konfiguriere Tailwind CSS
Öffne die Datei tailwind.config.js und konfiguriere den Pfad zu deinen HTML-Dateien. Dies ist notwendig, damit Tailwind CSS weiß, welche Dateien es auf Klassen prüfen muss.
bash
echo "module.exports = { content: [ './src/**/*.{html,js}', ], theme: { extend: {}, }, plugins: [], }" > tailwind.config.js
Schritt 6: Erstelle die CSS-Eingabedatei
Erstelle eine CSS-Datei, in der du die Basisanweisungen von Tailwind CSS importierst. Erstelle z.B. eine Datei src/input.css und füge folgende Zeilen hinzu:
bash
mkdir -p src echo "@tailwind base; @tailwind components; @tailwind utilities;" > src/input.css
Schritt 7: Erstelle die HTML-Datei
Erstelle eine HTML-Datei, z.B. src/index.html, und füge ein einfaches HTML-Gerüst hinzu:
bash
echo "<!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\"> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> <title>My Tailwind Project</title> <link href=\"output.css\" rel=\"stylesheet\"> </head> <body> <h1 class=\"text-3xl font-bold underline\"> Hello, world! </h1> </body> </html>" > src/index.html
Schritt 8: Erstelle das Build-Skript
Füge in deine package.json ein Skript hinzu, um Tailwind CSS zu beobachten und die CSS-Datei automatisch zu bauen, wenn Änderungen vorgenommen werden.
bash
npx json -I -f package.json -e 'this.scripts["build:css"]="npx tailwindcss -i ./src/input.css -o ./src/output.css --watch"'
Schritt 9: Starte das Build-Skript
Führe das Build-Skript aus, um Tailwind CSS im Überwachungsmodus zu starten.
bash
npm run build:css
Dies erstellt eine Datei src/output.css, die alle Tailwind CSS-Stile enthält und wird automatisch aktualisiert, wenn Änderungen an den HTML- oder CSS-Dateien vorgenommen werden.
Schritt 10: Starte einen lokalen Server
Du kannst einen einfachen Entwicklungsserver verwenden, um deine HTML-Datei zu hosten. Ein beliebtes Tool ist live-server, das du global installieren und verwenden kannst.
bash
npm install -g live-server live-server src
Kommentare