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

Question

I recently started developing an Electron application, and I am using daisyUI's Tailwind CSS components for the appearance of the user interface. I want to make the main window of the application rounded; however, daisyUI is making this task pretty challenging.

As you can see in the screenshot below, by default, daisyUI adds a background color to the body. I added the .bg-transparent class to the body tag, in order to make the background transparent, but daisyUI does not let the change apply (note the corners):

On the contrary, if I don't add daisyUI's CSS file to the head tag, the body becomes transparent:

Here's my HTML code:

<!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>

How can I make the body transparent with daisyUI?

score 4 · Accepted Answer · answered Dec 17 '21 at 01:02

Here you can read that daisyUI adds a few base styles if base is true in the tailwind.config.js file. Thus, I had to set base to false to solve my problem:

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

Note that, to do this, I had to install Tailwind CSS and daisyUI from npm.

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

1 Answers1