css - 在 Tailwind css 中否定条件

Question

有一个元素列表，我想为从第二个开始的所有元素应用一种样式，并为第一个应用另一种样式。

要申请第一个它正在工作first-of-type:bg-red-500，但如何将样式应用于其他样式？

似乎这:not(first-of-type:bg-blue-500)行不通。

Answer 1

目前在 Tailwind 中是不可能的，请参阅伪类参考以获取可能的变体列表。

在您的特定情况下，您可能希望像这样first使用（或first-of-type）修饰符：

<div>
  <div class="first:bg-blue-500 bg-red-500">First</div>
  <div class="first:bg-blue-500 bg-red-500">Second</div>
  <div class="first:bg-blue-500 bg-red-500">Third</div>
</div>

或者，您可以做的是通过查看元素的索引通过 js 应用所需的样式，例如，如果您在 React 中有元素列表：

      <div>
        {list.map((item, index) => (
          <div
            key={index}
            className={index === 0 ? 'bg-blue-500' : 'bg-red-500'}
          >
            {
              // ...
            }
          </div>
        ))}
      </div>