tailwind-css

How to Alternate Background Color of Grid Rows using TailwindCSS

Is there any built-in or easy way to set a unique background colour for alternating grid rows using a Grid Layout in TailwindCSS?

Lets says I have a grid that looks something like this:

<script src="https://cdn.tailwindcss.com"></script>

<div class="grid grid-cols-6 gap-4">
  <div class="col-span-6">Row 1</div>
  <div class="col-span-3">Row 2 A</div>
  <div class="col-span-3">Row 2 B</div>
  <div class="col-span-6">Row 3</div>
  <div class="col-span-2">Row 4 A</div>
  <div class="col-span-2">Row 4 B</div>
  <div class="col-span-2">Row 4 C</div>
</div>

Is there an effective way I could set the background colour for rows 2 and 4 to gray (bg-gray-100)? 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.

Solution

  • This is not really an alternating pattern as the title implies. You have the pattern of 1, 2A, 2B, 3, 4A, 4B, 4C. If it were alternating than 2A, 3, and 4B would get a background color.

    If what you're trying to achieve is for the 2's to be grouped and colored and the 4's to be grouped and colored you could group those rows into single elements, space them in a different way (grid or flex), add a unique class (striped in my example) and add a custom utility that leverages that unique class, like this:

    <script src="https://cdn.tailwindcss.com"></script>
<style type="text/tailwindcss">
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .striped div:nth-child(even) {
    @apply bg-gray-100
  }
}
</style>

<div class="grid grid-cols-6 gap-4 striped">
  <div class="col-span-6">Row 1</div>
  <div class="col-span-6 flex">
    <div class="flex-1">Row 2 A</div>
    <div class="flex-1">Row 2 B</div>
  </div>
  <div class="col-span-6">Row 3</div>
  <div class="col-span-6 flex">
    <div class="flex-1">Row 4 A</div>
    <div class="flex-1">Row 4 B</div>
    <div class="flex-1">Row 4 C</div>
  </div>
</div>

    Here's that working: Tailwind Play

    However, if you don't want to (or can't) change the shape of your markup then you could use a similar utility approach and only color the elements which have col-span-3 or col-span-2, this approach is not dealing with any pattern other than all your row 2's and 4's have those classes and they appear nowhere else, if that changed this would be unsuitable and not a good solution if the content is dynamic at all. It would look like this:

    <script src="https://cdn.tailwindcss.com"></script>
<style type="text/tailwindcss">
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .striped .col-span-3, .striped .col-span-2 {
    @apply bg-gray-100
  }
}
</style>

<div class="grid grid-cols-6 gap-4 striped">
  <div class="col-span-6">Row 1</div>
  <div class="col-span-3">Row 2 A</div>
  <div class="col-span-3">Row 2 B</div>
  <div class="col-span-6">Row 3</div>
  <div class="col-span-2">Row 4 A</div>
  <div class="col-span-2">Row 4 B</div>
  <div class="col-span-2">Row 4 C</div>
</div>

    And here is an example of that: Tailwind Play.

    Final note, if you did have a truly alternating pattern (like in approach 1) you could add a class to all the child elements using the even prefix like even:bg-gray-100 and it would only color the bg if it was an even child, this results in unused classes in your markup though.