search

primefaces / primevue-tailwind

PrimeVue Components Styled with Tailwind CSS
https://tailwind.primevue.org
MIT License
598 stars 71 forks source link

ColorPicker: displays solid color instead of gradient #315

Closed goldengecko closed 1 month ago

goldengecko commented 2 months ago

I first noticed in my app that the ColorPicker selection area is a solid colour rather than a gradient.

I then looked on here https://tailwind.primevue.org/colorpicker/ and see that it has the same problem here.

In my project, if I turn off the unstyled setting, it reverts to showing the gradient panel.

I'm therefore not completely certain whether this is a problem related to the tailwind preset usage or a core PrimeVue bug.

I'm using PrimeVue 4.0.5 and the RC version of Lara.

goldengecko commented 2 months ago

I believe this issue should be able to be fixed by changing the styling for colorpicker to include the following:

  colorBackground: {
    class: [
      'h-[150px] w-[150px]',
    ],
    style: 'background: linear-gradient(to top, #000 0%, rgb(0 0 0 / 0) 100%), linear-gradient(to right, #fff 0%, rgb(255 255 255 / 0) 100%)',
  },