title: How to create a class that uses odd-child pseudo selector with tailwindcss
body: <p>I'm having some difficulty using the <a href="https://tailwindcss.com/docs/pseudo-class-variants/#odd-child" rel="noreferrer">odd-child</a> 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.</p>
  
  <p>so far, i've tried:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.tr:odd {
    @apply bg-blue-200;
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>and</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@variants odd {
    .tr {
      @apply bg-blue-200;
    }
  
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>in tailwind.config.js, i've added the backgroundColor variant:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>variants: {
  'backgroundColor': ['responsive', 'odd', 'hover']
  },</code></pre>
  </div>
  </div>
  </p>