[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 (
    <Dialog>
      <DialogTrigger asChild>
        <div>Open</div>
      </DialogTrigger>
      <DialogContent className="sm:max-w-md">
        <DialogHeader>
          <DialogTitle>Test title</DialogTitle>
          <DialogDescription>
            Test description
          </DialogDescription>
        </DialogHeader>
        <div>Test content</div>
      </DialogContent>
    </Dialog>
  )
}

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

Chrome, Windows

Before submitting

• [X] I've made research efforts and searched the documentation
• [X] I've searched for existing issues

[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

[aladdin-im]

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.

[leon-lonsdale]

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;
   }
}

[shadcn]

This issue has been automatically marked as stale due to one year of inactivity. It will be closed in 7 days unless there’s further input. If you believe this issue is still relevant, please leave a comment or provide updated details. Thank you. (This is an automated message)