Es gibt eine Vielzahl an Anleitungen, wie Tailwind.css
in Vue.js
eingebunden werden kann, leider ist keine davon komplett oder aktuell.
Projekt starten
Wir beginnen damit, Vue.js
zu installieren und dann ein neues Vue-Projekt anzulegen (im Terminal/in Visual Code Studio):
npm install -g @vue/cli
vue create <Ordner>
Nun navigiert man mit den Pfeiltasten durch die Installation und wählt aus, welche Form der Installation gewünscht ist (Vue 2.0, Vue 3.0, Instanzen).
Alternativ lässt sich auch die Beta-Version von Vue GUI nutzen:
vue ui
tailwind.css
installieren
Jetzt installieren wir zusätzlich tailwind und den autoprefixer
(auch das ist in der Vue GUI möglich):
npm install tailwindcss autoprefixer
Um unser Projekt in tailwind wie gewohnt anpassen zu können, müssen wir die tailwindcss.config.js
erstellen:
npx tailwind init
Nun muss in vue/css
die Datei tailwind.css
mit folgendem Inhalt angelegt werden:
@tailwind base;
@tailwind components;
@tailwind utilities;
tailwind.css
und vue.js
verbinden
In der bereits bestehenden App.vue
fügen wir folgende Konfiguration hinzu:
import Vue from 'vue';
import App from './App.vue';
import 'css/tailwind.css';
In der postcss.config.js
(welche von tailwind.css
stammt) passen wir im letzen Schritt folgendes an:
module.exports = {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
]
}
Testen
Um die Installation zu prüfen, kannst du einem div in der App.vue
eine tailwind-spezifische Klasse, wie z.B. bg-black
hinzufügen.
„Bauen“
Zu guter Letzt muss sowohl ein Tailwind, als auch ein Vue Projekt am Ende „gebaut“ werden. Dafür führen wir folgenden Befehl aus:
npm run build