CODEWITHSUNDEEP
reactjstailwind-cssdaisyui
chichi
chichi

Reputation: 3301

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

Upvotes: 0

Views: 200

Answers (1)

Wongjn
Wongjn

Reputation: 24408

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>

Upvotes: 1

Related Questions