如何使用 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 进行分组和着色，您可以将这些行分组为单个元素，以不同的方式（网格或弹性）间隔它们，添加唯一的类（在我的示例中是条带化的）并添加一个利用该独特类的自定义实用程序，如下所示：

/* 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.tailwindcss.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.tailwindcss.com/EcMFPOe6p8?file=css

最后一点，如果你确实有一个真正的交替模式（如方法 1），你可以使用