htmlcss

TailwindCSS with DaisyUI has problems with bg-gradient-to-r from-primary to-secondary

The bg-gradient-to-r from-primary to-secondary does not work. The only workaround I've found is to have a hidden <div class="hidden bg-gradient-to-r from-[#39d7de] to-[#86ea8f]"> somewhere on the page. Then everything works fine. I've been working on this and asking AI for assistance, but I have not found any other solution. Is there a better methodology to make this work?

If you remove the in the code below, the other bg-gradient headers turn white.

<!DOCTYPE html>
<html lang="en" data-theme="bumblebee">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Testing DaisyUI</title>
    <script data-tailwind="components=*,gradients=*" src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
    <link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css" />
    <link href="https://cdn.jsdelivr.net/npm/daisyui@5/themes.css" rel="stylesheet" type="text/css" />
    <link href="https://cdn.jsdelivr.net/npm/daisyui@5/colors/properties-extended.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <!-- Gradient Header -->
    <div class="m-3 bg-gradient-to-r from-primary to-secondary">
        <h2 class="text-2xl">1) from-primary to-secondary</h2>
    </div>
    <div class="m-3 bg-gradient-to-r from-primary to-secondary">
        <h2 class="text-2xl">2) from-primary to-secondary</h2>
    </div>

    <div class="hidden bg-gradient-to-r from-[#39d7de] to-[#86ea8f]">
        <h2 class="text-2xl">bg-gradient-to-r from-[#39d7de] to-[#86ea8f]</h2>
        <p>if remove above bg-gradient, then all bg-gradient-to-r become white.</p>
    </div>

    <div class="m-3 bg-gradient-to-r from-primary to-secondary">
        <h2 class="text-2xl">3) from-primary to-secondary</h2>
    </div>
    <div class="m-3 bg-gradient-to-r from-primary to-secondary">
        <h2 class="text-2xl">4) from-primary to-secondary</h2>
    </div>
</body>
</html>

Solution

  • The issue is not mainly with the gradients. Issue is how Tailwind CSS and DaisyUI resolves color tokens.

    <!DOCTYPE html>
<html lang="en" data-theme="bumblebee">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DaisyUI Gradient Issue</title>
  <script data-tailwind="components=*,gradients=*" src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
  <link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css" />
  <link href="https://cdn.jsdelivr.net/npm/daisyui@5/themes.css" rel="stylesheet" type="text/css" />
  <link href="https://cdn.jsdelivr.net/npm/daisyui@5/colors/properties-extended.css" rel="stylesheet" type="text/css" />
</head>
<body>
  
  <div class="hidden from-[--p] to-[--s]"></div>

  <div class="m-3 bg-gradient-to-r from-primary to-secondary p-4 text-white rounded">
    <h2 class="text-2xl">1) from-primary to-secondary</h2>
  </div>

  <div class="m-3 bg-gradient-to-r from-primary to-secondary p-4 text-white rounded">
    <h2 class="text-2xl">2) from-primary to-secondary</h2>
  </div>

  <div class="m-3 bg-gradient-to-r from-primary to-secondary p-4 text-white rounded">
    <h2 class="text-2xl">3) from-primary to-secondary</h2>
  </div>

  <div class="m-3 bg-gradient-to-r from-primary to-secondary p-4 text-white rounded">
    <h2 class="text-2xl">4) from-primary to-secondary</h2>
  </div>

</body>
</html>