如何使用 TailwindCSS 更改网格行的背景颜色

Question

是否有任何内置或简单的方法可以使用TailwindCSS 中的网格布局为交替网格行设置唯一的背景颜色？

可以说我有一个看起来像这样的网格：

<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>

有没有一种有效的方法可以将第 2 行和第 4 行的背景颜色设置为灰色 ( bg-gray-100)？我在文档中找不到任何内容，虽然我可以使用 Javascript 实现此目的，但我希望有一种仅使用 TailwindCSS 的更简单的方法。

Answer 1

正如标题所暗示的那样，这实际上并不是一种交替模式。您的图案为 1、2A、2B、3、4A、4B、4C。如果它是交替的，那么 2A、3 和 4B 将获得背景颜色。

如果您想要实现的是对 2 进行分组和着色，对 4 进行分组和着色，您可以将这些行分组为单个元素，以不同的方式（网格或 Flex）间隔它们，添加一个唯一的类（在我的示例中是条带化的）并添加一个利用该独特类的自定义实用程序，如下所示：

/* your Tailwind CSS file */

@tailwind base;
@tailwind components;
@tailwind utilities;

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

<!-- HTML -->

<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>

这是 Tailwind Play 上的工作https://play.tai​​lwindcss.com/PSgtwIfbmO

但是，如果您不想（或不能）更改标记的形状，那么您可以使用类似的实用方法，并且仅对具有col-span-3或 的元素进行着色col-span-2，此方法不处理除所有模式之外的任何模式第 2 行和第 4 行有这些类，并且它们不会出现在其他地方，如果发生更改，如果内容是动态的，那么这将是不合适的，也不是一个好的解决方案。它看起来像这样：

/* your Tailwind CSS file */

@tailwind base;
@tailwind components;
@tailwind utilities;

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

<!-- HTML -->

<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>

这是 Tailwind Play 上的一个示例https://play.tai​​lwindcss.com/EcMFPOe6p8?file=css

最后注意，如果您确实有一个真正的交替模式（如方法 1 中），您可以使用前缀evenlike向所有子元素添加一个类even:bg-gray-100，并且如果它是偶数子元素，它只会为 bg 着色，这会导致未使用的类不过在你的标记中。