如何使用 daisyUI (Tailwind CSS) 使主体透明？

Question

我最近开始为用户界面的外观开发 Electron application, and I am using daisyUI 的 Tailwind CSS 组件。我想让应用程序的主要 window 变圆；然而，daisyUI 使这项任务变得非常具有挑战性。

正如您在下面的屏幕截图中看到的，默认情况下，daisyUI 会为主体添加背景色。我将 .bg-transparent class 添加到 body 标签，以使背景透明，但 daisyUI 不让更改应用（注意角落）：

相反，如果我不在head标签中添加daisyUI的CSS文件，body就变成透明的了：

这是我的 HTML 代码：

<!DOCTYPE html>
<html class="h-full">
    <head>
        <meta charset="UTF-8">
        <link href="https://cdn.jsdelivr.net/npm/daisyui@1.16.5/dist/full.css" rel="stylesheet" type="text/css" />
        <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2/dist/tailwind.min.css" rel="stylesheet" type="text/css" />
        <link href="./renderer/stylesheet/main.css" rel="stylesheet">
        <title>Widget</title>
    </head>
    <body class="select-none h-full bg-transparent">
        <div class="h-full rounded-xl bg-green-500">
            <h1 class="text-3xl font-bold underline">HEY</h1>
        </div>
        <script src="./renderer/javascript/renderer.js"></script>
    </body>
</html>

如何使用 daisyUI 使主体透明？

Answer 1

Here 如果 tailwind.config.js 文件中的 base 是 true，您可以看到 daisyUI 添加了一些基本样式。因此，我不得不将 base 设置为 false 来解决我的问题：

module.exports = {
  ...
  daisyui: {
    base: false
  }
}

请注意，为此，我必须从 npm 安装 Tailwind CSS 和 daisyUI。

如何使用 daisyUI (Tailwind CSS) 使主体透明？

How to make the body transparent with daisyUI (Tailwind CSS)?

html

css

electron

tailwind-css

daisyui