在 Tailwind css 中否定条件

【问题标题】：Negate a condition in Tailwind css在 Tailwind css 中否定条件
【发布时间】：2022-01-17 07:25:37
【问题描述】：

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

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

:not(first-of-type:bg-blue-500) 好像不行。

【问题讨论】：

对于这个特定的用例，使用last: 修饰符。 stackoverflow.com/questions/61455473/…

标签： css css-selectors tailwind-css styling tailwind-in-js

【解决方案1】：

目前无法在 Tailwind 中使用，请参阅 pseudo class reference 了解可能的变体列表。

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

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

【讨论】：