Search code examples
reactjstailwind-cssdaisyui

DaisyUI changing background Color. I can't set the HTML color before components are loading

App.js

<div className="bg-background w-max h-max">
  <Footer />
  <Modal />
</div>

html

  <body
    style="
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
      background-color: #030518;
    "
  >

And, yet before loading the screen. It looks like this. It becomes normal if I remove the DaisyUI out of tailwindcss but I want to use it tho. How can I make the whole HTML color to #030518?

enter image description here

Solution

  • Consider setting your background color on the <html> element. DaisyUI has a CSS rule that sets the background-color of this.

    tailwind.config = {
  theme: {
    extend: {
      backgroundColor: {
        background: 'pink',
      },
    },
  },
}
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.tailwindcss.com/3.4.5"></script>

<html class="!bg-[#030518]">
  <body
    style="
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
      background-color: #030518;
    "
  >
  <div class="bg-background w-max h-max">
    <Footer>Footer</Footer>
    <Modal>Modal</Modal>
  </div>