如何使用daisyUI(Tailwind CSS)使身体透明?

Posted

技术标签:

【中文标题】如何使用daisyUI(Tailwind CSS)使身体透明?【英文标题】:How to make the body transparent with daisyUI (Tailwind CSS)? 【发布时间】:2022-01-19 05:03:00 【问题描述】:

我最近开始开发Electron 应用程序,我正在使用daisyUI 的 Tailwind CSS 组件来呈现用户界面。我想让应用程序的主窗口变圆;然而,daisyUI 让这项任务变得非常具有挑战性。

正如您在下面的屏幕截图中看到的,默认情况下,daisyUI 会为正文添加背景颜色。我将.bg-transparent 类添加到body 标记中,以使背景透明,但daisyUI 不允许更改应用(注意角落):

相反,如果我不将daisyUI的CSS文件添加到head标签中,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 使主体透明?

【问题讨论】:

【参考方案1】:

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

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

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

【讨论】:

以上是关于如何使用daisyUI(Tailwind CSS)使身体透明?的主要内容,如果未能解决你的问题,请参考以下文章

Tailwind.css — 如何使用 Tailwind 实现 last-child?

你如何使用 Tailwind.css 构建 npm?

如何将@tailwind CSS 规则添加到 CSS 检查器

使用 Tailwind 时如何使用 Webpack 缩小 CSS

如何检查 Tailwind 是不是真的清除了 CSS?

如何让 Animate.css 与 Tailwind 的 @responsive 指令一起使用?