Wie du Tailwind CSS im Vue.js-Projekt nutzen kannst

Du hast erfolgreich ein Vue-Projekt gestartet (wie das geht haben wir hier aufgeschrieben) und möchtest nun TailwindCSS als Utility-Framework zur Entwicklung nutzen? Dann zeigen wir dir im folgenden Beitrag, wie du das relativ einfach hin bekommst.

Zuerst musst du die notwendigen Packages installieren:

npm install tailwindcss autoprefixer
-- ODER --
yarn add tailwindcss autoprefixer

Dann kannst du mit dem folgenden Command das tailwindcss.config.js file in deinem Projekt erstellen:

npx tailwind init

Ist das erledigt, kannst du unter assets einen neuen Ordner /css erstellen und dort die Datei tailwind.css anlegen. Hier fügst du folgende Imports hinzu:

@tailwind base;
@tailwind components;
@tailwind utilities;

Nun müssen wir der Vue-App mitteilen, dass die CSS-Styles genutzt werden sollen. Dafür importieren wir unsere neue tailwind.css in die App.vue.

import Vue from 'vue';
import App from './App.vue';

import './assets/styles/tailwind.css';

Im letzten Schritt passen wir unser postcss.config.js an. So geben wir an, dass wir beide Plugins nutzen wollen.

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
  ]
}

Ist das erledigt, können wir prüfen, ob alles funktioniert. Füge am besten eine Tailwind-CSS-Klasse wie bg-red-500 einem div in App.vue hinzu und schaue ob du die Änderung nach dem Livereload siehst. Passt alles? Perfekt, dann hast du erfolgreich TailwindCSS zu deinem Projekt hinzugefügt.

Bundle-Größe optimieren

Tailwind vergrößert dein CSS immens. Wenn du also nun npm run build ausführst solltest du die Veränderung sehen. Über 679 KiB ist das CSS nun groß. Das bekommen wir jedoch relativ einfach reduziert.

File                                      Size             Gzipped

dist/js/chunk-vendors.9080b304.js         119.90 KiB       41.68 KiB
dist/js/app.d8b6098b.js                   7.19 KiB         2.58 KiB
dist/service-worker.js                    0.96 KiB         0.54 KiB
dist/js/about.edf670de.js                 0.44 KiB         0.31 KiB
dist/css/app.6504396d.css                 679.39 KiB       85.10 KiB

Um nicht genutzte Tailwind-CSS-Klassen aus deinem Bundle zu entfernen, nutzen wir PurgeCSS in Verbindung mit PostCSS. Dazu füge zuerst das notwendige Package dem Projekt hinzu:

npm install purgecss  @fullhuman/postcss-purgecss

Ist die Installation abgeschlossen, müssen wir in der PostCSS Config folgende Änderung vornehmen:

const purgecss = require(“@fullhuman/postcss-purgecss”);

module.exports = {
    plugins: [
      require(‘tailwindcss’),
      require(‘autoprefixer’),

    // Only add purgecss in production
    process.env.NODE_ENV === 'production'
      ? purgecss({
          content: ['./src/**/*.html', './src/**/*.vue'],
        })
      : '',
  ],
}

Wenn wir nun npm run build erneut starten, sollten wir bereits drastische Verbesserungen bei der CSS-Datei erkennen.

File                                      Size             Gzipped

dist/js/chunk-vendors.9080b304.js         119.90 KiB       41.68 KiB
dist/js/app.d8b6098b.js                   7.19 KiB         2.58 KiB
dist/service-worker.js                    0.96 KiB         0.55 KiB
dist/js/about.edf670de.js                 0.44 KiB         0.31 KiB
dist/css/app.69044861.css                 2.14 KiB         0.81 KiB

2.14 KiB damit lässt sich starten!

Links:

• TailwindCSS