All imported Elements have transparent BG's?

[HobbyHaus]

Hello all,

No matter the element, when I use it, the drop down or date picker (or whatever the element) has a seemingly transparent background.

What I've tried

1. Disabling my CSS
2. adjusting z-index
3. targeting the background of elements (which is seemingly impossible)

Nothing works. Have had nothing but issues using this easy setup. Hoping someone here can help shed some light.

---

link to screenshot of one (date picker) example. The text "tab 1 content vertical" is behind the pop up date picker window
https://i.ibb.co/9VxDxC8/Screenshot-3.jpg

[smolenski-mikolaj]

@HobbyHaus did you set darkMode: "class" in tailwind config file?

[smolenski-mikolaj]

I recommend to check our MDB GO Starter to compare the configuration of the projects.

[HobbyHaus]

Okay the only "fix" (which isn't a fix) comes when I place class="dark" within the browser inspector, seen below...

that alternation, on a browser level, nets me this....

important thing to note, nothing "fixes" if I substitute light instead of dark.

[smolenski-mikolaj]

Do you have tailwind modules imported like this in your main css/scss file?

@tailwind base;

@layer base {
  html {
    @apply text-neutral-800;
  }
  html.dark {
    @apply text-neutral-50;
    @apply bg-neutral-800;
  }
}

@tailwind components;
@tailwind utilities;

[HobbyHaus]

Yes, exactly like this.

[HobbyHaus]

Just to reiterate, this issue is NOT fixed.