如何在Tailwind CSS不同断点下正确切换nth-child样式？

需求与问题 #

• 需求：
  • xl断点以下（默认状态）：网格内所有奇数项（1、3、5、7、9）显示蓝色背景
  • xl断点及以上：仅第1、5、9项（符合4n+1规则）显示蓝色背景
• 问题：切换到xl屏幕尺寸时，基础的[&>*:nth-child(2n+1)]:bg-blue-500和xl前缀的[&>*:nth-child(4n+1)]:bg-blue-500会同时生效，导致所有奇数项都变成蓝色，不符合预期。

解决方案 #

核心是在xl断点时重置掉基础样式中不需要的规则，再应用新的选择器样式。具体操作是给xl断点添加一个重置奇数项背景色的类，覆盖基础样式的蓝色，然后再设置4n+1项的蓝色。

修改后的代码如下：

<html lang="en">

<head>
  <script src="https://unpkg.com/@tailwindcss/browser"></script>
</head>

<body class="bg-gray-800">
  <section class="container mx-auto my-10 text-white">
    <div class="grid grid-cols-2 gap-10 text-white 
                [&>*:nth-child(2n+1)]:bg-blue-500
                xl:grid-cols-4 
                xl:[&>*:nth-child(2n+1)]:bg-gray-600 
                xl:[&>*:nth-child(4n+1)]:bg-blue-500">
      <div class="size-20 bg-gray-600">1</div>
      <div class="size-20 bg-gray-600">2</div>
      <div class="size-20 bg-gray-600">3</div>
      <div class="size-20 bg-gray-600">4</div>
      <div class="size-20 bg-gray-600">5</div>
      <div class="size-20 bg-gray-600">6</div>
      <div class="size-20 bg-gray-600">7</div>
      <div class="size-20 bg-gray-600">8</div>
      <div class="size-20 bg-gray-600">9</div>
      <div class="size-20 bg-gray-600">10</div>
    </div>
  </section>
</body>

</html>

原理说明 #

Tailwind的断点样式会生成媒体查询，和基础样式权重一致，但因为xl:前缀的类写在后面（CSS同权重规则下，后定义的样式优先级更高），所以xl断点时：

1. xl:[&>*:nth-child(2n+1)]:bg-gray-600会覆盖基础的[&>*:nth-child(2n+1)]:bg-blue-500，把所有奇数项的背景重置回默认灰色
2. 随后xl:[&>*:nth-child(4n+1)]:bg-blue-500再把符合4n+1规则的项改成蓝色，完美实现断点间的样式切换

内容的提问来源于stack exchange，提问作者DevWebTk