fix: proper Tailwind v4 CSS structure in globals.css

- @theme inline → @theme so tokens generate utility classes (bg-bg,
  text-text, font-display etc.) rather than being inlined as vars only
- Wrap base resets, keyframes and custom classes in @layer base for
  correct Tailwind cascade ordering
- Remove broken @source directives (Tailwind v4 auto-detects sources
  from the project root when using @tailwindcss/postcss with Next.js)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-06-14 16:37:59 +02:00
parent ea7f0551f0
commit 9a87e9dde3
+3 -15
View File
@@ -1,21 +1,7 @@
@import "tailwindcss";
@import "flag-icons/css/flag-icons.min.css";
@source "*.{ts,tsx}";
@source "../app/groups/*.{ts,tsx}";
@source "../app/history/*.{ts,tsx}";
@source "../app/players/[name]/*.{ts,tsx}";
@source "../app/search/*.{ts,tsx}";
@source "../app/stats/*.{ts,tsx}";
@source "../app/teams/[slug]/*.{ts,tsx}";
@source "../app/tournaments/[year]/*.{ts,tsx}";
@source "../components/*.{ts,tsx}";
@source "../lib/*.{ts,tsx}";
@source "../lib/db/*.{ts,tsx}";
@source "../lib/graphql/*.{ts,tsx}";
@source "../lib/graphql/resolvers/*.{ts,tsx}";
@theme inline {
@theme {
--color-bg: #040d08;
--color-card: #0a1810;
--color-hero: #0d2416;
@@ -31,6 +17,7 @@
--font-body: "Space Grotesk", system-ui, sans-serif;
}
@layer base {
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
@@ -69,3 +56,4 @@ body {
rgba(34,197,94,0.018) 88px
);
}
}