-
Notifications
You must be signed in to change notification settings - Fork 829
Description
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.