[bug]: globals.css
contains default NextJS CSS variables that interfere with the theme
#4845
Open
2 tasks done
Labels
bug
Something isn't working
Describe the bug
Issue: After running
npx shadcn@latest init -d
, the resultingglobals.css
contains both the default NextJS setup as well as the themed css variables. These variables overlap and cause issues with the tailwind setup created via the shadcn command.As a concrete example, the
tailwind.config.ts
background looks like this:background: "hsl(var(--background))"
(note that it expects--background
to be a hsl value. The problem is that the default NextJS setup uses hex for the themed colors. These override the ones specified by the shadcn theme and effectively corrupt the theme. The resulting style given to the browser looks like:Note that it is trying to use a hex value as an hsl value.
Since the value passed to the browser is not valid, it renders the background color as transparent which messes with all of the components that rely on this background theming (read: practically all of them).
I noticed this initially on the slider component as the thumb was entirely transparent.
Expected: The resulting
globals.css
file should not contain the default NextJS setup.Workaround: If others face this issue and notice that their components look a little funny, simply remove the default NextJS theming (first
:root
block through to the first@layer utilities
blockSee the first part of the resulting
globals.css
file below:Affected component/components
All
How to reproduce
npx shadcn@latest init -d
npx shadcn@latest add slider
Codesandbox/StackBlitz link
No response
Logs
No response
System Info
Before submitting
The text was updated successfully, but these errors were encountered: