vue.js mit tailwind.css verbinden

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