title: Using TailwindCSS - how to activate the "odd" variant for flex properties in an each loop
body: <p>I would like to be able to &quot;flip&quot; the order of some elements on every odd indexed element in an each loop.</p>
  <p>The output should be:</p>
  <pre><code>&lt;div class=&quot;flex flex-row&quot;/&gt;
  &lt;div class=&quot;flex flex-row-reverse&quot;/&gt;
  &lt;div class=&quot;flex flex-row&quot;/&gt;
  &lt;div class=&quot;flex flex-row-reverse&quot;/&gt;
  </code></pre>
  <p>...and so on.</p>
  <p>So I want to do something like:</p>
  <pre><code>{#each elems as elem}
  &lt;div class=&quot;flex flex-row odd:flex-row-reverse&quot;/&gt;
  {/each}
  </code></pre>
  <p>Currently my tailwind.config.js includes:</p>
  <pre><code>variants: {
      extend: {
          flexDirection: ['odd']
      }
  },
  </code></pre>
  <p>but this has no effect in the following element:</p>
  <pre><code>&lt;div class=&quot;flex flex-row odd:flex-row-reverse&quot;&gt;
  </code></pre>