CODEWITHSUNDEEP
csstailwind-css
ejpsnackoverflow
ejpsnackoverflow

Reputation: 71

How to create a class that uses odd-child pseudo selector with tailwindcss

I'm having some difficulty using the odd-child psuedo selector in a class. odd:bg-blue-200 works fine when using it inline. But i'd like to extract this style so all of my table rows have this style when given class .tr. I've been reviewing the docs but the solution is eluding me. I hope someone here can help.

so far, i've tried:

.tr:odd {
  @apply bg-blue-200;
}

and

@variants odd {
  .tr {
    @apply bg-blue-200;
  }

}

in tailwind.config.js, i've added the backgroundColor variant:

variants: {
'backgroundColor': ['responsive', 'odd', 'hover']
},

Upvotes: 7

Views: 8790

Answers (3)

Ed_
Ed_

Reputation: 19098

A more recent way to achieve a similar thing without writing a custom CSS rule is to use the new(ish) arbitrary selectors as a single class to apply to the parent element (e.g. tbody):

[&>tr:nth-child(odd)]:bg-gray-100

& - self referential
>tr - direct children that are `tr`s
nth-child(odd) - only odd children

Upvotes: 1

tweitzel
tweitzel

Reputation: 363

I have an @import "./custom-utilities.css"; as the last line in my tailwind.css.

I want to use the even/odd CSS only below a class named .markdown, so my relevant section from the custom-utilities.css looks like this:

.markdown {
    & tbody tr {
        @apply ;
    }
    & tbody tr:nth-child(odd) {
        @apply bg-gray-100;
    }
}

The strange thing is: the CSS for tr:nth-child(odd) only gets applied if the empty @apply for tr is present. Is this a bug in Tailwind CSS? I'm using 1.9.3 at the moment, but I'm sure that it used to work without the first block (with the empty @apply) for a previous version.

AFAIK, it's not necessary to include odd in the variants section in tailwind.config.js because it's included by default.

Upvotes: 0

Davy de Vries
Davy de Vries

Reputation: 5123

Just a vanilla css rule can do the trick in combination with @apply of tailwind. (A config change for this is not required.)

.tr:nth-child(odd) {
    @apply bg-blue-200;
}

Upvotes: 4

Related Questions