fix(frontend): Tailwind-Utilities griffen nicht - global.css war unlayered
CI / backend-tests (push) Failing after 2m6s
CI / frontend-build (push) Successful in 19s

Root Cause fürs "sieht noch alt aus": global.css wurde separat unlayered importiert, Tailwind-Utilities liefen in layer(utilities). Unlayertes CSS gewinnt in der CSS-Kaskade IMMER gegen jeden Layer, unabhängig von Spezifität - die meisten neuen Tailwind-Klassen (text-4xl, rounded-lg, border-l-*, etc.) wurden dadurch von alten global.css-Regeln überstimmt, ohne sichtbaren Effekt. Fix: global.css läuft jetzt selbst in einem eigenen Layer ("global-css"), Layer-Reihenfolge explizit deklariert (global-css < theme < utilities) - Tailwind gewinnt jetzt wie vorgesehen. main.tsx importiert global.css nicht mehr separat, das übernimmt tailwind.css per @import layer(global-css).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01CVgbozhYmuEhiEJHffRXCV
This commit is contained in:
2026-09-07 13:35:26 +02:00
co-authored by Claude Sonnet 5
parent 0c448c7ff7
commit 85df756c3f
3 changed files with 50 additions and 2 deletions
+42
View File
@@ -6531,3 +6531,45 @@ Keine Commits in dieser Session.
- .claude/agents/tailwind-expert.md | 53 +++++++++++++++++++++++++++++++++++++++++++++++++++++
---
## 2026-09-07 13:27 13:28 (1m)
**Beschreibung:** Claude Code Session
**Projekt:** asb-material
### Commits
- 0c448c7 perf(dashboard): React-Review - Memoization, stabile Callbacks, Key-Fixes
### Geänderte Dateien
- DEVLOG.md | 114 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
- frontend/src/pages/dashboard/DashboardPage.tsx | 86 +++++++++++++++++++++++++----------------
- frontend/src/pages/dashboard/TileFrame.tsx | 21 +++++++---
- frontend/src/pages/dashboard/tiles/AblaufdatenTile.tsx | 5 ++-
- frontend/src/pages/dashboard/tiles/AktivitaetTile.tsx | 5 ++-
- frontend/src/pages/dashboard/tiles/AufgabenTile.tsx | 9 +++--
- frontend/src/pages/dashboard/tiles/EinsatzbereitschaftTile.tsx | 6 ++-
- frontend/src/pages/dashboard/tiles/KennzahlenTile.tsx | 6 ++-
- frontend/src/pages/dashboard/tiles/MaengelTile.tsx | 8 ++--
- frontend/src/pages/dashboard/tiles/PrueftermineTile.tsx | 9 +++--
- frontend/src/pages/dashboard/tiles/QualifikationTile.tsx | 6 ++-
---
## 2026-09-07 13:28 13:28 (0m)
**Beschreibung:** Claude Code Session
**Projekt:** asb-material
### Commits
Keine Commits in dieser Session.
### Geänderte Dateien
- DEVLOG.md | 114 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
- frontend/src/pages/dashboard/DashboardPage.tsx | 86 +++++++++++++++++++++++++----------------
- frontend/src/pages/dashboard/TileFrame.tsx | 21 +++++++---
- frontend/src/pages/dashboard/tiles/AblaufdatenTile.tsx | 5 ++-
- frontend/src/pages/dashboard/tiles/AktivitaetTile.tsx | 5 ++-
- frontend/src/pages/dashboard/tiles/AufgabenTile.tsx | 9 +++--
- frontend/src/pages/dashboard/tiles/EinsatzbereitschaftTile.tsx | 6 ++-
- frontend/src/pages/dashboard/tiles/KennzahlenTile.tsx | 6 ++-
- frontend/src/pages/dashboard/tiles/MaengelTile.tsx | 8 ++--
- frontend/src/pages/dashboard/tiles/PrueftermineTile.tsx | 9 +++--
- frontend/src/pages/dashboard/tiles/QualifikationTile.tsx | 6 ++-
---
-1
View File
@@ -3,7 +3,6 @@ import { createRoot } from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import App from "./App";
import "./styles/global.css";
import "./styles/tailwind.css";
createRoot(document.getElementById("root")!).render(
+8 -1
View File
@@ -1,5 +1,12 @@
/* Nur Theme+Utilities, kein Preflight - global.css bleibt für den Rest der App
die Basis, Tailwind wird gezielt fürs Dashboard-Redesign genutzt. */
die Basis, Tailwind wird gezielt fürs Dashboard-Redesign genutzt.
WICHTIG: global.css muss selbst in einem Layer laufen ("global-css" hier
niedriger priorisiert als "utilities") - unlayertes CSS gewinnt in der
CSS-Kaskade IMMER gegen jeden Layer, egal wie spezifisch. Ohne diesen
Layer-Import hätten Tailwind-Utility-Klassen praktisch keine Wirkung gegen
die bestehenden global.css-Regeln gehabt. */
@layer global-css, theme, utilities;
@import "./global.css" layer(global-css);
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/utilities.css" layer(utilities);