bug: table-zebra class not applying background color as expected

[algowhiz]

What version of daisyUI are you using?

v4.0.3

Which browsers are you seeing the problem on?

Chrome

Reproduction URL

https://play.tailwindcss.com/8cZeWJ3aSo?file=css

Describe your issue

The table-zebra class is not applying the expected background color in an alternating row pattern due to conflicts with custom color settings in the project. This affects readability as the alternating background colors do not appear as intended.

Expected Behavior: The table-zebra class should display distinct background colors on alternate rows, overriding custom colors to ensure consistent styling for better readability.

Actual Behavior: Due to custom color definitions, the background color for alternate rows is not applied as expected. Applying an !important flag to the table-zebra row colors could potentially resolve this issue.

// Apply alternating background colors to table-zebra rows

.table-zebra tbody tr:nth-child(odd) { background-color: #f9fafb !important; //light }

.table-zebra tbody tr:nth-child(even) { background-color: #e5e7eb !important; //dark }

[github-actions[bot]]

Thank you @algowhiz for reporting issues. It helps daisyUI a lot 💚
I'll be working on issues one by one. I will help with this one as soon as a I find a solution.
In the meantime providing more details and reproduction links would be helpful.

[euglv]

https://play.tailwindcss.com/8cZeWJ3aSo?file=css

You forget

  plugins: [require('daisyui')],

in the tailwind config. Removing !important from your custom css changes nothing in the output.