From 85df756c3fb1e0a9dc5b3bed601fa67a86c9640f Mon Sep 17 00:00:00 2001 From: patrick Date: Mon, 7 Sep 2026 13:35:26 +0200 Subject: [PATCH] fix(frontend): Tailwind-Utilities griffen nicht - global.css war unlayered MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 Claude-Session: https://claude.ai/code/session_01CVgbozhYmuEhiEJHffRXCV --- DEVLOG.md | 42 ++++++++++++++++++++++++++++++++ frontend/src/main.tsx | 1 - frontend/src/styles/tailwind.css | 9 ++++++- 3 files changed, 50 insertions(+), 2 deletions(-) diff --git a/DEVLOG.md b/DEVLOG.md index fd9ca74..acf97e0 100644 --- a/DEVLOG.md +++ b/DEVLOG.md @@ -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 ++- + +--- diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx index 44717ed..323c550 100644 --- a/frontend/src/main.tsx +++ b/frontend/src/main.tsx @@ -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( diff --git a/frontend/src/styles/tailwind.css b/frontend/src/styles/tailwind.css index d279d8d..bb4d899 100644 --- a/frontend/src/styles/tailwind.css +++ b/frontend/src/styles/tailwind.css @@ -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);