In den meisten meiner Angular Projekte kommt @angular/material als Bibliothek zum Einsatz, um die „handelsüblichen“ Komponenten parat zu haben, die nahezu jede Business-Anwendung benötigt. Neben den fertig gestylten Komponenten haben wir eine ganze Reihe weiterer Stylings zu definieren, die das allgemeine Layout und die Anordnung dieser Komponenten betreffen. Ein kleiner Helfer im Alltag: Tailwind
Was ist Tailwind?
A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.
Tailwind setzt also nicht auf fertige Komponenten, sondern bietet eine große Menge an Utility-Klassen, mit deren Hilfe wir unsere Designs erstellen können. Dabei binden wir nicht einfach eine riesige CSS Datei ein, sondern Tailwind sorgt durch einen zusätzlichen build-Schritt dafür, dass nur die Klassen generiert werden, die tatsächlich auch in der Anwendung verwendet werden. Ich persönlich bin kein großer Fan von dem Ansatz, lange Listen von CSS-Klassen im HTML zu kombinieren, um fertige Komponenten zu erstellen, aber die Utility-Eigenschaften, um grundlegende Stylings zu setzen, helfen an vielen Stellen unnötige CSS-Klassen zu vermeiden. So ließe sich z.B. ein einfacher Flex-Container definieren:
<div class="flex flex-col gap-4"></div>
Tailwind 4 + Angular + SCSS
Die Einbindung ist relativ einfach und beschränkt sich auf die Installation von Tailwind und die Konfiguration / Einbindung in seiner Projekt-Style-Datei ( offizielle Dokumentation ). Wer genau hinsieht, entdeckt aber eine Stolperfall: so wird das Angular Projekt mit der Stylings-Erweiterung „CSS“ generiert. Projekte die SASS/SCSS einsetzen werden hier schnell merken das die Generierung der Klassen zur Laufzeit zwar korrekt funktionieren, aber z.B. IntelliJ keinerlei autocompletion für diese Klassen anbietet. Abhilfe schafft hier folgendes Vorgehen:
- Installation wie dokumentiert:
npm install tailwindcss @tailwindcss/postcss postcss --force.postcssrc.jsonerstellen und Plugin aktivieren
- (anstatt nun den Import in der styles.scss zu definieren)
- Datei mit „*.css“ (_tailwind.css) Endung anlegen und Import definieren
@import "tailwindcss";
- CSS-Datei in style.scss inkludieren:
...
@use './style/tailwind';
...
Angular Material Theming
Fast geschafft. Wer nun ein eigenes Angular Theme definiert, wird wenig freundlich vom Tailwind-Linter mit einem Fehler konfrontiert:
$light-theme: mat.define-theme((
....
))
‚… does not exist in your theme config‘
Da Tailwind hier von einem Tailwind-Theme-Aufruf ausgeht. Dieser Fehler verhindert zwar keinen erfolgreichen Build, wird aber entsprechend in der Ide angezeigt. Aktuell schafft hier leider nur das Deaktivieren dieser Linter-Regel Abhilfe, (IntelliJ; Settings > Tailwind)
...
"lint": {
...
"invalidConfigPath": "ignore",
...
},
