shadcn color + radius utilities are dead because CSS vars are hex or undefined while Tailwind expects HSL triplets

[VishwajeetTulse]

Summary

tailwind.config.ts maps the shadcn design tokens as hsl(var(--token)) (and the radius scale as var(--radius)), but src/app/globals.css either defines the variable as a hex value or never defines it at all. Every one of these utilities therefore compiles to an invalid CSS value the browser drops, so classes like bg-background, bg-primary, border-input, and rounded-lg silently render as no-ops.

Root cause

1. Hex where an HSL triplet is expected

tailwind.config.ts:

background: 'hsl(var(--background))',
foreground: 'hsl(var(--foreground))',

src/app/globals.css:6-7:

--background: #ffffff;
--foreground: #171717;

So bg-background becomes hsl(#ffffff), which is invalid and gets dropped.

2. Tokens that are never defined

tailwind.config.ts also maps primary, secondary, card, popover, muted, accent, destructive, border, input, ring, chart-1..5, and --radius. None of these variables exist in globals.css or any other stylesheet, so hsl(var(--primary)) resolves to hsl() and var(--radius) resolves to empty, both invalid.

Impact (dead classes currently in use)

Cause	Utilities (uses in src/)
hex vs HSL	bg-background (2), text-foreground (1)
undefined var	bg-primary (3), text-primary (3), bg-card (1), bg-secondary (2), text-muted-foreground (6), bg-accent (3), bg-destructive (2), border-input (2), ring-ring (3)
undefined --radius	rounded-lg (41), rounded-md (10), rounded-sm (2)

The rounded-* row is the loudest: the borderRadius extend in tailwind.config.ts overrode Tailwind's defaults with var(--radius), so all 53 uses render with square corners.

Suggested fix

Define the full shadcn token set as HSL triplets (space-separated, no hsl() wrapper, no commas) in :root and .dark, and add --radius, for example:

:root {
  --background: 0 0% 100%;
  --foreground: 0 0% 9%;
  --primary: 0 0% 9%;
  /* …secondary, card, popover, muted, accent, destructive, border, input, ring, chart-1..5… */
  --radius: 0.5rem;
}
.dark { /* dark palette */ }

The new-york / neutral defaults in components.json give a ready-made palette. Alternatively, if these tokens aren't wanted, drop the corresponding mappings from tailwind.config.ts so the classes don't appear usable.

[rohans02]

Two notes before you start:

Go with option 1, define the tokens. Please do not drop the mappings from tailwind.config.ts. components.json already has "cssVariables": true with the neutral base colour, and 7 of the 15 components in src/components/ui/ (button, card, dialog, input, tooltip, loading, TradingViewWidget) already use these tokens. Removing the mappings would break every future shadcn add.

Related bug in the same file, please fold it into this PR. src/app/globals.css:298 wraps the at-rule in literal backticks:

`@media` (pointer: fine) {
  .hero-cursor {
    cursor: none;
  }
}

That is a syntax error, so the .hero-cursor rule never applies.

[eshaanag]

I have resolved this locally by defining the missing shadcn neutral design tokens and --radius inside the :root and .dark blocks in globals.css. I also updated the direct var(--background) and var(--foreground) references in the html/body rules to use the hsl() wrapper so that body backgrounds render correctly. The Next.js production build and linting checks pass successfully with these changes. Please let me know if I should submit a pull request for this. - Eshaan