I want to apply background to odd tr of table

[callor]

I want to apply background to odd tr of table

I want to specify a background color for odd tr in the table as in the following example, but it is not specified. The setting is visible in the browser developer mode, but the background color is applied to the entire tr.

<table class="table-auto">
<tbody>
<tr class="detail-toggle border-b border-b-gray-400/70 bg-white odd:bg-gray-300 hover:bg-[var(--theme-white-background-hover)] cursor-pointer"
>
<td>....</td>
</tr>
</tdboy>
</table>

[rozsazoltan]

I think your code works as expected, it just looks clearer with more than one tr. Close it with tbody instead of tdboy.

• https://play.tailwindcss.com/9yPeHHMitW
• https://tailwindcss.com/docs/hover-focus-and-other-states#first-last-odd-and-even
• https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child#odd

A minimal reproduction would help to better understand your problem. For example, TailwindCSS utilities are often overridden by stronger styles. In such cases, you might feel that it "doesn't work", but - as you also mentioned - in the devtools you can track which property is overriding the background color set by the utility. For example:

• From v4 the reset style cannot be overridden by TailwindCSS classes

This is usually called reset CSS, e.g. you set a white background for everything:

• https://play.tailwindcss.com/TTsMIdyi7J?file=css
• https://play.tailwindcss.com/43qg4ANuXZ?file=css

or remove the background with revert:

• https://play.tailwindcss.com/D9ZwDoL4HF?file=css

[callor]

Thank you. It works fine when I test it in the playground, so why doesn't it work in my project?

[rozsazoltan]

@callor If you share a git repo, I can give a more detailed answer to this mysterious question. As I mentioned, the most common issue is that you are overriding with unlayered CSS, so the TailwindCSS utility cannot take effect because it has weaker CSS specificity compared to your custom style.

P.S.: From the question, I assume everything else works, and its just the odd: background-color that isn't applying.