Tailwindcss — ohne node

Tailwindcss kann auch ohne einen Node Server verwendet werden, hierfür benötigen wir aber trotztdem npm um die Datei für tailwindcss zu erstellen um darin dann nur die Klassen zu haben, die wir auch verwendet haben.

Wir erstellen uns also ein neuen Ordner und erstellen dort unser neues npm Projekt.

mkdir tailwindcss-plain-html && cd tailwindcss-plain-html
npm init

Danach können wir uns unsere npm-Pakete installieren, die wir benötigen. Dazu gehört autoprefixer, postcss und tailwindcss.

npm install --save-dev autoprefixer postcss tailwindcss

Als nächstes muss man die config-Dateien anlegen für das postcss und die tailwind config.

Hier einmal die postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

Hier einmal die tailwind.config.js

/** @type {import('tailwindcss').Config} */

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

Hier ist es wichtig, dass bei content der Pfad zu unseren HTML-Dateien ist. Meine Dateien liegen im gleichen Ordner oder unter dem src Verzeichnis.

Nun kann man ganz normal seine HTML-Dokumente bearbeiten und schreiben. Wenn man nun die tailwindcss Klassen generieren möchte kann man folgenden Befehl benutzen:

npx tailwindcss build main.css -o output.css

Nun muss man nur noch die output.css Datei in seine HTML-Dateien einbinden.