Negate a condition in Tailwind css

Question

There is a list of elements where I want to apply a style for all the elements starting from the second one and another style for the first one.

To apply for the first one it's working first-of-type:bg-red-500 but how to apply a style to the other ones?

It seems that :not(first-of-type:bg-blue-500) does not work.

For this specific use case, use the `last:` modifier. https://stackoverflow.com/questions/61455473/how-to-use-not-in-tailwind-css — Shreshth, Jan 13 '22 at 04:03

Danila · Answer 1 · 2022-07-06T11:25:04.223

It is not possible at this moment in Tailwind, see pseudo class reference for a list possible variants.

In your specific case you might want to use first (or first-of-type) modifier 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>

Alternatively what you can do is to apply needed styles through js by looking at the index of the element, for example if you have list of elements in React:

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

Thank you. Using the index to selectively apply styles is a very good idea. — bytrangle, Jul 06 '22 at 10:57

Negate a condition in Tailwind css

1 Answers1