Philipp Munzert

Philipp schreibt zu Themen wie VueJS, JamStack, Produktentwicklung und Teamkultur.

Mittwoch, 4. September

Tailwind CSS und VueJS

So fügst du das Utility Framework deinem Projekt hinzu

Du hast erfolgreich ein Vue Projekt gestartet (wie das geht haben wir hier aufgeschrieben) und möchtest nun Tailwind CSS als Utility Framework zur Entwicklung nutzen, dann zeigen wir dir im folgenden Beitrag, wie du das relativ einfach hinbekommst.

Zuerst musst du die notwendigen Packages installieren:

npm install 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 fügst du unter App.vue folgendes als Script-Tag hinzu. Die anderen Standard Einträge kannst du eigentlich entfernen. Das musst du eben von Fall zu Fall prüfen.

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 einem div in App.vue hinzu und schaue ob du die Änderung nach dem Livereload siehst. Passt alles? Perfekt dann hast du Tailwind CSS zu deinem Projekt hinzugefügt.

Bundle Größe optimieren

Tailwind CSS bringt eine Vergrößerung deiner Dateigröße für CSS mit sich. 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: