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 Branch master zu main umbennen

December 20, 2021

Zuerst benennen wir unser Master in Main lokal um: 2. Nun möchten wir auf unserem entferntem Repository das selbe tun. Ändert den master auf main in eurem entfernetem Repository (GitLab, GitHub etc.). Dann könnt ihr von lokal aus: den neuen branch bespielen. Um den master jetzt zu löschen folgendes eingeben: Ich persönlich fand es unnötig […]

Sprechblassen mit HTML und CSS bauen

November 22, 2021

Es kommt immer mal wieder vor, dass man eine Sprechblase zum Beispiel in einer Kommentarbox bauen muss. Wie war das gleich nochmal?!? Man kann sich ja nicht immer alles merken und es gibt im Netzt auch nützliche Generatoren für diese Fälle. Für Sprechblasen könnte man zum Beispiel diesen hier nehmen: https://www.html-code-generator.com/css/speech-bubble-generator . Mit ein paar […]

Table colspan und rowspan Generator

November 21, 2021

Komplizierte Konstrukte mit Tabellen abzubilden war eigentlich eine Dispziplinzwischen den Jahr 2000 und 2003 herum. Immer wieder kommen aber bei Stackoverflow Fragen auf, wie man solche oder solche Tabellen darstellt. Statt auf das coole und moderne Grid System zurückzugreifen wird noch mit Tabellen gearbeitet. Wie auch immer. Wer sich den Horror mit colspans und rowspan […]

Eine bestehende Datenbank auf einem Docker laufen lassen

November 11, 2021

Stellt euch vor ihr bekommt die undankbare Aufgabe ein altes WordPress Projekt zu upgraden. Das Projekt hinkt bereits zwei Major Releases hinterher. Das bedeutet ihr könnt nicht einfach im Produktivsystem ein upgrade vollziehen. Ihr müsst euch das Produsystem auf eure lokale Entwicklungsumgebung kopieren. Dafür eignet sich Docker ganz gut. Heute gehe ich davon aus, dass […]

Ein Git reset wieder rückgängig machen

November 8, 2021

Stellt euch vor. Ihr habt ein commit gemacht und wollt diesen aber wieder zurücksetzen. Quasi ein Rollback um eins zurück. Das macht ihr mit git reset HEAD~1. Nun sagt ihr: Ähh, doch lieber nicht… Um das wieder rückgängig zu machen könnt ihr mit git reset –hard commit_id_des_letzten_HEAD den reset Commit wieder rückgängig machen und ihr […]

Zwischen den Git Commits springen

November 2, 2021

Allgemein kann man zwischen den einzelnen Git Branches springen. Aber wie sieht es aus, wenn man zwischen einzelnen Commits innerhalb einer Branch springen will? Ein Fall wäre, man arbeitet an einem Feature. Ist immer Feature Branche ausgecheckt und setzt während der Entwicklung kleinere Commits ab. Dann kommt die Stelle wo man sagt, ok ich muss […]