From 8e607478d59359eb74111b38dc860d989d06c9fc Mon Sep 17 00:00:00 2001 From: Matt Date: Sat, 21 Feb 2026 01:39:24 +0100 Subject: [PATCH] Fix Tremor chart colors: safelist dynamic utility classes for Tailwind v4 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Tremor constructs class names via template literals (e.g. fill-${color}-${shade}) which Tailwind v4's scanner cannot detect statically. Added @source inline() directives to explicitly safelist all color×shade×property combinations needed by Tremor chart components. Co-Authored-By: Claude Opus 4.6 --- src/app/globals.css | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/app/globals.css b/src/app/globals.css index 51fcd5e..381a2be 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -43,10 +43,16 @@ /* Source the JS config for extended theme values */ @config "../../tailwind.config.ts"; -/* Tremor generates Tailwind utility classes dynamically (fill-blue-500, bg-emerald-500, etc.) - Tailwind v4 needs to scan Tremor's compiled JS to include them in the output. */ +/* Tremor generates Tailwind utility classes dynamically via template literals + (e.g. `fill-${color}-${shade}`). Tailwind v4's scanner cannot detect these, + so we must explicitly safelist every color+shade+property combination. */ @source "../../node_modules/@tremor/react/dist/**/*.js"; +/* Safelist Tremor chart color utilities — all colors × key shades × fill/stroke/bg */ +@source inline("{fill,stroke,bg,text}-{blue,emerald,amber,violet,rose,indigo,sky,fuchsia,lime,orange,cyan,teal,purple,slate,gray,zinc,neutral,stone,red,yellow,green,pink}-{50,100,200,300,400,500,600,700,800,900,950}"); +@source inline("hover:{bg,text,border}-{blue,emerald,amber,violet,rose,indigo,sky,fuchsia,lime,orange,cyan,teal,purple,slate,gray,zinc,neutral,stone,red,yellow,green,pink}-{50,100,200,300,400,500,600,700,800,900,950}"); +@source inline("{border,ring}-{blue,emerald,amber,violet,rose,indigo,sky,fuchsia,lime,orange,cyan,teal,purple,slate,gray,zinc,neutral,stone,red,yellow,green,pink}-{50,100,200,300,400,500,600,700,800,900,950}"); + /* Theme variables - using CSS custom properties with Tailwind v4 @theme */ @theme { /* Container */