Tailwind CSS v3: Installation als PostCSS-Plugin mit Vite & Alpine.js

Seit der Veröffentlichung von Tailwind CSS v3 gibt es viele neue Features und Verbesserungen, die es zu einem attraktiven Framework für die Entwicklung von benutzerfreundlichen und ansprechenden Websites machen. In diesem Artikel werden wir uns damit beschäftigen, wie man Tailwind CSS v3 als PostCSS-Plugin mit Vite und Alpine.js installiert.

Vorbereitung

Bevor wir beginnen, stellen Sie sicher, dass Sie Node.js und npm installiert haben. Um Vite zu installieren, verwenden Sie den folgenden Befehl:

npm install -g create-vite

Um ein neues Projekt mit Vite zu erstellen, führen Sie den folgenden Befehl aus:

create-vite mein-projekt

Installation von Tailwind CSS v3

Um Tailwind CSS v3 zu installieren, fügen Sie zuerst das PostCSS-Plugin hinzu, indem Sie den folgenden Befehl ausführen:

npm install -D @tailwindcss/postcss7-compat postcss@^8

Als nächstes müssen Sie die Tailwind CSS-Konfigurationsdatei erstellen, indem Sie den folgenden Befehl ausführen:

npx tailwindcss init

Öffnen Sie die erstellte tailwind.config.js-Datei und passen Sie die Konfiguration nach Ihren Wünschen an.

Integration von Alpine.js

Alpine.js ist ein deklaratives JavaScript-Framework, das gut mit Tailwind CSS funktioniert. Um Alpine.js zu installieren, führen Sie den folgenden Befehl aus:

npm install alpinejs

Als nächstes müssen Sie Alpine.js in Ihrem HTML-Dokument einbinden, indem Sie das folgende Tag in Ihre Datei einfügen:

<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v3.8.2/dist/alpine.min.js"></script>

Konfiguration von Vite

Öffnen Sie die vite.config.js-Datei und fügen Sie das Tailwind CSS-Plugin und das Alpine.js-Plugin hinzu:


import { defineConfig } from 'vite'
import VitePluginWindicss from 'vite-plugin-windicss'
import VitePluginVue from '@vitejs/plugin-vue'

export default defineConfig({
plugins: [
VitePluginVue(),
VitePluginWindicss()
]
})


Starten Sie Ihre Entwicklung

Jetzt sind Sie bereit, Ihre Entwicklungsumgebung zu starten, indem Sie den folgenden Befehl ausführen:

npm run dev

Jetzt können Sie Tailwind CSS v3, PostCSS, Vite und Alpine.js in Ihrem Projekt verwenden und erstklassige Benutzeroberflächen erstellen.