Bolzplatzarena

Mit Rückenwind in die Zukunft?

Heute geht es mir darum, euch Tailwind ein wenig näher zu bringen. Tailwind ist ein sogenanntes "utility first" CSS Framework, das verspricht, krasse Layouts bauen zu können. Es basiert auf dem Prinzip, statt CSS zu schreiben, "einfach" eine Menge von Utility-CSS-Klassen zu vergeben, welche sich auch noch schnell lernen lassen.

Und wenn man es schafft auf SCSS zu verzichten, dann muss auch nicht nichts mehr durch den Preprozessoren laufen, was den Compile-Prozess durchaus beschleunigen kann. Aber um ehrlich zu sein, ist das für mich nicht wirklich relevant. Bei meinen Projekten wird die Zeit eher bei den Styles verbraucht.

Mir ging es eher um eine gewisse Standardisierung, die mir hilft, mich nicht immer und immer wieder zu wiederholen, ohne es zu bemerken.

Und los geht es ...

Wir installieren mal die Dinge, die gebraucht werden:

npm install postcss --save-dev
npm install tailwindcss

Mitunter ist es möglich auf die manuelle Installation von postcss zu verzichten, das bekommt npm für euch hin.
Danach Initialisiert man noch per

tailwind init

das Projekt und erzeugt dadurch eine Konfiguration. Die einzige Konfiguration im ersten Schritt mache ich bei "purge", so dass unnötige Klassen von Tailwind automatisch entfernt werden. Allerdings will ih das nicht für ng serve damit man auf die Schnelle im Browser eine neue Klasse testen kann ohne zu kompilieren.

purge: {
enabled: process.env.WEBPACK_DEV_SERVER === "true" && process.argv.join(" ").indexOf("build") !== -1,
content: [
"./src/**/*.{html,ts}",
"./apps/**/*.{html,ts}",
"./libs/**/*.{html,ts}"
]
},

In der Basis Style-Datei "importiert" man dann noch noch alles nötige und schon ist man fertig:

@tailwind base;
@tailwind components;

@tailwind utilities;

Nun kann man Tailwind bequem in seinen Templates nutzen. In kleines Projekten kann man dadurch auf viele Style-Dateien verzichten. In einem kleinen privaten Projekt habe ich nur noch die Style-Datei des Projektes, dort habe ich Tailwind eingetragen und eine eigene Schriftart. Das wars. Keine der Komponenten im Projekt hat noch eine Style-Datei. Die Dateien und der jeweilige Verweis auf diese habe ich alle entfernt. Somit könnte man auch komplett auf eine SCSS Preprocessing verzichten und CSS nutzen, was den ein oder anderen Vorteil bei der Compile-Zeit bringen könnte.