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

【问题标题】：How to Alternate Background Colour of Grid Rows using TailwindCSS如何使用 TailwindCSS 更改网格行的背景颜色
【发布时间】：2021-12-19 04:54:06
【问题描述】：

是否有任何内置或简单的方法可以在 TailwindCSS 中使用 Grid Layout 为交替网格行设置独特的背景颜色？

假设我有一个看起来像这样的网格：

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

【问题讨论】：

标签： tailwind-css

【解决方案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.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），你可以使用 even 前缀为所有子元素添加一个类，如 even:bg-gray-100 并且它只会为 bg 着色，如果它是一个偶数的孩子，这会导致您的标记中未使用的类。

【讨论】：

【解决方案2】：

你可以添加这个插件，它会给 tailwind css nth 孩子支持：

https://github.com/ellreka/tailwindcss-nth-child

【讨论】：