title: How to Alternate Background Colour of Grid Rows using TailwindCSS
body: <p>Is there any built-in or easy way to set a unique background colour for alternating grid rows using a <a href="https://tailwindcss.com/docs/grid-template-columns" rel="nofollow noreferrer">Grid Layout</a> in TailwindCSS?</p>
  <p>Lets says I have a grid that looks something like this:</p>
  <pre><code>&lt;div class=&quot;grid grid-cols-6 gap-4&quot;&gt;
      &lt;div class=&quot;col-span-6&quot;&gt;Row 1&lt;/div&gt;
      &lt;div class=&quot;col-span-3&quot;&gt;Row 2 A&lt;/div&gt;
      &lt;div class=&quot;col-span-3&quot;&gt;Row 2 B&lt;/div&gt;
      &lt;div class=&quot;col-span-6&quot;&gt;Row 3&lt;/div&gt;
      &lt;div class=&quot;col-span-2&quot;&gt;Row 4 A&lt;/div&gt;
      &lt;div class=&quot;col-span-2&quot;&gt;Row 4 B&lt;/div&gt;
      &lt;div class=&quot;col-span-2&quot;&gt;Row 4 C&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Is there an effective way I could set the background colour for rows 2 and 4 to gray (<code>bg-gray-100</code>)? I cannot find anything in the documentation and while I could achieve this using Javascript I was hoping there was a simpler way using only TailwindCSS.</p>