fix(frontend): Tailwind-Utilities griffen nicht - global.css war unlayered
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:
@@ -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 ++-
|
||||
|
||||
---
|
||||
|
||||
@@ -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(
|
||||
|
||||
@@ -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);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user