CODEWITHSUNDEEP
csscss-selectorstailwind-cssstylingtailwind-in-js
Leo Messi
Leo Messi

Reputation: 6166

Negate a condition in Tailwind css

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.

Upvotes: 2

Views: 5558

Answers (1)

Danila
Danila

Reputation: 18476

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>

Upvotes: 2

Related Questions