I’m experiencing persistent issues with CSS custom properties (color variables) not rendering correctly in v0, despite multiple attempts to fix the configuration.
Problem:
- CSS color variables defined in globals.css are not being applied to components
- Colors are reverting to generic oklch values instead of our brand colors
- Semantic color tokens (like
--primary,--destructive) are not mapping to our defined brand colors
Expected Behavior:
Our brand color system should render with:
- Primary colors: Purple palette (
#8179ff,#7239ee, etc.) - Destructive colors: Red palette (
#f2521c,#e23c12, etc.) - Complete color palettes: Purple, blue, green, yellow, orange, magenta, red, charcoal (each with 11 shades from 50-950)
We also use the Figma variables that were set up by shadcn/ui and I took screenshots of those for v0.dev to apply to the global css for the component theme, and that doesn’t seem to be working either.
Current Behavior:
- Colors display as generic tailwinds colors
- CSS shows correct variable definitions but they’re not being applied
- Components use fallback colors instead of brand colors
Technical Details:
- Project: Illume Component Library
- Using Tailwind CSS v4 with @theme inline configuration
- Color variables defined as RGB values (e.g.,
--purple-500: 130 91 247;) - Semantic colors mapped using
rgb(var(--variable))format
Files Affected:
- app/globals.css (contains complete color system definitions)
- All shadcn/ui components not reflecting brand colors
This appears to be a v0-specific issue with CSS custom property parsing or application. Please investigate why our color variables aren’t being recognized by the v0 rendering engine.
Chat thread I’ve been working in: https://v0.app/chat/illume-component-library-b5cxeOkmmKv