[bug]: Dialog and Sheet have no background

[rytelk]

Describe the bug

Dialog and Sheet has no background

Affected component/components

Sheet, Dialog

How to reproduce

1. Create new project npx shadcn@latest init dialog
2. Replace `page.tsx' with the following code

   
   import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog"

export default function Home() { return (

Open

Test title Test description

Test content

) } ``` 3. Run application and open the dialog 4. See the following result:  Temporary fix: I modified the background class in the dialog component from bg-background to bg-[var(--background)], and this corrected the issue. It seems like the default background variable is not being applied correctly in some cases. ### Codesandbox/StackBlitz link _No response_ ### Logs _No response_ ### System Info ```bash Chrome, Windows ``` ### Before submitting - [X] I've made research efforts and searched the documentation - [X] I've searched for existing issues

[czrsd]

Hi there, I tried it and it works fine for me. Could you maybe give more details of your configs? Perhaps something is missing in your configuration that's necessary for shadcn UI: https://ui.shadcn.com/docs/installation/vite

[alexander-densley]

https://github.com/user-attachments/assets/ac50d10e-9b11-4479-a1ac-85320b234fcf

tldr: css variables do not seem to be working with the new cli

When I init a new shadcn project with dashboard-02 i get sheet's without a backgound. Looks like css variables are not being recognized. When I do the same thing but init and choose to NOT use css variables there is no issue

[aigc-in-all]

It's just because the format of the color definition is wrong. and just delete this code in global.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

/* delete start */
:root {
  --background: #ffffff;
  --foreground: #171717;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}
/* delete end */

body {
  color: var(--foreground);
  background: var(--background);
  font-family: Arial, Helvetica, sans-serif;
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;
...

...

Because in tailwind.config.ts, bg-background is defined like this:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        background: 'hsl(var(--background))', <- rgb(var(--background))
        foreground: 'hsl(var(--foreground))', <- rgb(var(--foreground))
      },
    },
  },
}

rgb is correct, but hsl is wrong. Do you see the difference?

[alexander-densley]

@aigc-in-all thanks! that worked!

[veerbal1]

The issue is caused by the Tailwind setup created by create-next-app. I tried the solution above, but it didn’t work.

Solution:
Delete the tailwind.config.ts and global.css files generated by create-next-app.

Recreate these files and copy the configuration from the official Tailwind website to set up Tailwind in Next.js.

Then, run npx shadcn@latest init.

This will fix the issue.

[LeonLonsdale]

The issue is caused by the Tailwind setup created by create-next-app. I tried the solution above, but it didn’t work.

Solution: Delete the tailwind.config.ts and global.css files generated by create-next-app.

Recreate these files and copy the configuration from the official Tailwind website to set up Tailwind in Next.js.

Then, run npx shadcn@latest init.

This will fix the issue.

This worked for me - Note: you also have to delete the components.json if it exists before you can run the fresh init.

[nickfrosty]

for me, if I am setting colors using the hex string (#000000) then the sheet will have no background. but if I update it to use the correct hsl numbers (0 0 0) then it works

this does not work:

@layer base {
  :root {
    --background: 0 0% 100%;
   }
   .dark{
   --background: #414141;
   }
}

this does work

@layer base {
  :root {
    --background: 0 0% 100%;
   }
   .dark{
    --background: 0 0 8;
   }
}