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.
1mkdir tailwindcss-plain-html && cd tailwindcss-plain-html
2npm init
Danach können wir uns unsere npm-Pakete installieren, die wir benötigen. Dazu gehört autoprefixer, postcss und tailwindcss.
1npm install --save-dev autoprefixer postcss tailwindcss
2
Als nächstes muss man die config-Dateien anlegen für das postcss und die tailwind config.
Hier einmal die postcss.config.js
1module.exports = {
2 plugins: {
3 tailwindcss: {},
4 autoprefixer: {},
5 }
6}
Hier einmal die tailwind.config.js
1/** @type {import('tailwindcss').Config} */
2
3module.exports = {
4 content: ["./src/**/*.html", "./*.html"],
5 theme: {
6 extend: {},
7 },
8 plugins: [],
9}
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:
1npx tailwindcss build main.css -o output.css
Nun muss man nur noch die output.css Datei in seine HTML-Dateien einbinden.