Badge.jsx: text-foreground is undefined — no foreground color in tailwind config #62

New Issue

Closed

opened 2026-05-17 17:53:03 -05:00 by null · 0 comments

null commented

2026-05-17 17:53:03 -05:00

Owner

Bug Description

src/components/ui/Badge.jsx line 10 defines the outline variant as 'text-foreground'. There is no foreground color defined in the project's tailwind.config.js. The custom colors are: background, section-alt, card, border, text, muted, soft-text, navy-light, primary.navy, primary.blue, primary.cyan, accent.gold.

Since foreground doesn't exist, text-foreground compiles to nothing in the Tailwind output, meaning the outline badge variant has no text color applied — it inherits whatever color cascades from its parent.

Fix

Change 'text-foreground' to 'text-text' to match the project's design system.

Labels

bug, frontend, P2 Medium

## Bug Description `src/components/ui/Badge.jsx` line 10 defines the `outline` variant as `'text-foreground'`. There is no `foreground` color defined in the project's `tailwind.config.js`. The custom colors are: `background`, `section-alt`, `card`, `border`, `text`, `muted`, `soft-text`, `navy-light`, `primary.navy`, `primary.blue`, `primary.cyan`, `accent.gold`. Since `foreground` doesn't exist, `text-foreground` compiles to nothing in the Tailwind output, meaning the outline badge variant has no text color applied — it inherits whatever color cascades from its parent. ## Fix Change `'text-foreground'` to `'text-text'` to match the project's design system. ## Labels - bug, frontend, P2 Medium