Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Gradient setting bg-gradient-to bug #1090

@Matszs

Description

@Matszs

Describe the bug
The gradient properties like 'bg-gradient-to-r' are not working with the colors that are not included in Flowbite (but are in Tailwindcss).

to-emerald-600: Works fine, can be found in flowbite.css
to-emerald-500: Doesn't work, also not part of flowbite.css

To Reproduce
Steps to reproduce the behavior:

You can create a div with a gradient background, this case is working:

<div class="h-20 w-20 bg-gradient-to-r from-emerald-400 to-emerald-600"></div>

But this case isn't:

<div class="h-20 w-20 bg-gradient-to-r from-emerald-400 to-emerald-500"></div>

When you only use Tailwindcss both cases are fine.

Expected behavior
The gradient should work with both colors (-600, -500), showing a gradient from emerald 400 to 500.

Desktop:

  • OS: Windows 11
  • Browser Firefox
  • Version 141

Additional context
From the flowbite css I can see that when you use 'bg-gradient-to-r' it adds the following css rules:

--tw-gradient-position: to right in oklab,;
background-image: linear-gradient(var(--tw-gradient-stops));

It seems the comma after 'oklab,' causes the problem, when I remove this using the inspector from my browser it fixes the problem.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions