htmlcsstailwind-cssdaisyui

Why does DaisyUI change how Tailwind default renders?

When setting up a tailwind and daisyui project, I noticed that daisyui changes how tailwind by default renders.

Why when using daisyui does it not render the green background on the whole page?

<!DOCTYPE HTML>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>test</title> 
            <link href="https://cdn.jsdelivr.net/npm/daisyui@4.11.1/dist/full.min.css" rel="stylesheet" type="text/css" />
            <script src="https://cdn.tailwindcss.com"></script>
        </head>
        <body class="bg-green-100">
            test
        </body>
</html>

versus the same snippet but without daisyui:

<!DOCTYPE HTML>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>test</title> 
            <script src="https://cdn.tailwindcss.com"></script>
        </head>
        <body class="bg-green-100">
            test
        </body>
</html>

I think there is a simple answer but I can't seem to figure it out. In general however, it seems suspect that daisyui would change how tailwind works by default.

Solution

  • Daisy UI adds a background-color to the :root element (<html> in this case):

    enter image description here

    This seems to override the <body> element's background color, thus causing the difference in appearance you are experiencing.