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.
