Warum ungenutztes CSS in Tailwind & Next.js entsteht

Und wie man es sicher reduziert

Warum "unused CSS" auch in modernen Projekten auftaucht

Auch in Tailwind- und Next.js-Projekten sammelt sich ungenutztes CSS an. Das ist kein Fehler, sondern eine Folge von Skalierung und Flexibilitaet.

Je groesser das Projekt, desto mehr Styles bleiben zurueck.

---

Was "ungenutztes CSS" wirklich bedeutet

Ungenutztes CSS:

• ist im Bundle enthalten,
• wird aber nicht (oder nicht ueberall) angewendet.

Wichtig:

• Pro Seite ungenutzt != global ungenutzt.
• Tools erkennen keine Zustaende, Interaktionen oder Breakpoints.

---

Typische Ursachen

• globale Utility-Verfuegbarkeit,
• zustandsabhaengige Klassen,
• geteilte Komponenten,
• Legacy-Code,
• zu breite Safelists.

---

Relevanz fuer Performance und SEO

SEO direkt: nein. Performance indirekt: ja.

Zu viel CSS kann:

• Rendering verzoegern,
• LCP verschlechtern,
• Layout-Reflows verursachen.

---

Haeufige Fehler

• blindes Loeschen,
• ueberaggressives Tree-Shaking,
• Optimierung ohne visuelle Pruefung.

---

Unser sicherer Ansatz

1. Impact bewerten
2. Global vs. lokal trennen
3. Styles scopen
4. Tailwind-Konfig pruefen
5. Visuell validieren

Stabilitaet hat Vorrang.

---

Wo echte Verbesserungen entstehen

• kleinere globale Styles,
• aufgeraeumte Komponenten,
• saubere Design-Systeme.

Nicht durch Perfektionismus.

---

Fazit

Ungenutztes CSS ist normal.

Ziel ist nicht Eliminierung, sondern Kontrolle. Gute Performance entsteht durch saubere Architektur - nicht durch Tool-Hoerigkeit.