Tailwind Purge unter npm run dev laufen lassen

Einer der Hauptgründe warum ich von Bootstrap auf TaiklwindCSS umgestiegen bin, ist der realisierte Traum von relative kleinen CSS Dateien. Statt ein ganzes CSS Framework immer und wieder zu laden, kann man mit TailwindCSS nur den wirklich im Code benötigten Style generieren lassen. Also eine 100% Effizienz, was bedeutet wir sparen Ressourcen. Und zwar Strom und Ladezeit (GCI – GreenCodeIdiology) So kann man CSS Datei Größen unter 40 KB erhalten und zwar für ein ganzes Projekt. Der Vollständigkeitshalber sei hier aber erwähnt, dass man Bootstrap bis zu einem gewissen Grad auch optimieren kann. Aber es kommt meiner Meinung bei Weitem nicht an die TailwindCSS Möglichkeiten herran.

Die Magie die hinter dem steckt, heißt bei Tailwind purge. Einstellungen zum purgen werden in der tailwind.config.js vorgenommen. Ich weiß es ist vielleicht überflüssig zu erwähnen, aber man kann nur purgen, wenn man Tailwind als Package geladen hat und nicht als CDN nutzt. Wie ihr euch TailwindCSS über ein Packagemanager installiert setze ich an dieser Stelle voraus.

Tailwind purged = bereinigt sobald es auf „Production“ geht. Also npm run prod. Bei einem npm run dev wird noch nicht gepurged. Wer das aber gerne möchte, kann es manuell in der tailwind.config.js einstellen.

module.exports = {
  purge: {
    enabled: true,
    content: [
      './src/**/*.html',
      './src/**/*.vue'
    ],
},

Und jetzt mal run dev laufen lassen und ihr werdet sehen, statt der üblichen 3,83 MB werden es erstaunlich weniger sein.


Leave a Comment

Your email address will not be published. Required fields are marked *

*

*

Empfholende Artikel


Git – Closing a Branch – Was soll das sein?

May 4, 2021

Wer mit Bitcucket arbeitet kennt den Terminus. Nach einem erfolgreichen Merge auf den Master kann der Branch mit einem Häckchen in einer Checkbox geschlossen werden. Unter den Kollegen ist man sich einig. Branch immer schließen. Bloß warum? Zuerst sollte erwähnt werden, dass es in Git kein explizietes Branch closen gibt. Man kann einen Branch aber […]

Git Pull Request enthält fremde Commits

April 2, 2021

Vielleicht ist das euch auch schon mal passiert. Mir jedenfalls passiert das immer mal wieder mal. Ich checke in ein Branch ein um zum Beispiel ein Code Review vorzunehmen. Nachdem ich fertig bin, schnappe ich mir ein Ticket und eröffne einen neuen Feature Branche. Der eine oder andere ahnt bestimmt schon, worauf ich hinaus will? […]

Git Commit Message Regeln

March 22, 2021

Lange Zeit war mir das auch nicht klar, dass es Regeln für Git Commit Messages gibt. Wie sinnvoll die Regeln sind erschließt sich spätestens dann wenn man in größeren Teams arbeitet. Diese 7 Regeln möchte ich euch hier kurz erklären. Die Regel hat der Softwareentwickler Chris Beams vor einiger Zeit erstellt und auf seinem Blog […]

HTML Boilerplate / Scaffold / Vorlage

February 13, 2021

Um schnell mal etwas auszuprobieren, kann es sein das man ein HTML Grundgerüst benötigt. Vielleicht geht es euch ähnlich wie mir. Ich bin faul uns suche dann im anderen Projekten schnell das Gerüst. Was aber immer mit nicht ganz ohne Aufwendung dann einzufügen ist. Man muss hier und dort noch was löschen bzw. korrigieren. Aus […]

Docker auf Ubuntu 18.04 installieren

February 13, 2021

Docker auf einem frischen Ubunto 18.04 installieren geht in wenigen Schritten. Mit frischem meine ich ein System wo noch keine ältere Dockerversion vorher lief. Wir holen jetzt paar Pakete die wir für die Docker Installation brauchen rein. Nun fügen wir den GPG Key/Schlüssel für das offizielle Docker Repository hinzu. (ist ein freies Kryptographiesystem) Jetzt fügen […]

Git – Neuen Branch verwerfen / löschen

February 10, 2021

Es kommt vor, dass man ein Feature für ein Projekt entwickeln soll und man zuerst ausprobiert was so geht. Ihr arbeitet an einem Remote Repository und entwickelt lokal. Dann schnell mal ein composer update und die composer.lock ist geändert. Ihr wollt am liebsten den ganzen Branch verwerfen und zum Step zurück wo ihr angefangen habt. […]