为什么 DaisyUI 会改变 Tailwind 默认渲染方式？

问题描述 投票：0回答：1

在设置 tailwind 和 daisyui 项目时，我注意到 daisyui 改变了 tailwind 默认呈现的方式。

为什么使用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> 
            <link href="https://cdn.jsdelivr.net/npm/[email protected]/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>

与相同的片段但没有 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>

我认为有一个简单的答案，但我似乎无法弄清楚。但总的来说，似乎怀疑 daisyui 会改变 tailwind 默认的工作方式。

html css tailwind-css daisyui
1个回答
0
投票

Daisy UI 将 

background-color
添加到 
:root
元素（在本例中为 
<html>
）：

enter image description here

这似乎会覆盖 

<body>
元素的背景颜色，从而导致您遇到的外观差异。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.