How to add conditional style based on the parent class?

[gursewak-sohi]

For instance, I have multiple list items, I want to change the style of the active list item only. In CSS i can achieve it like this:

One

Two

Three

li {
color: red;
}

li.active {
color: blue;
}

How we can acheive this in tailwind css?

[lukewarlow]

Going to need more context as to your setup. But you would add text-red-500 (or whatever colour you want) and then conditionally add text-blue-500 (or whatever colour you want) to the "active" li using javascript.

Alternatively you can make use of Tailwind's @apply and do something like

li { 
    @apply text-red-500;
}

li.active {
     @apply text-blue-500;
}

Or do a mixture of both. It really depends on your setup and your preferences.

If I've misunderstood your question, I would try and add more context to your question to explain the exact thing you're trying to do and your overall tech stack as that might help tailor answers to your situation.

[gursewak-sohi]

This is the CSS way, so there is no tailwind way to achieve the same?

[lukewarlow]

Using classes like .active isn't what Tailwind is designed to do. The idea is to use utility classes and variants. Without further information about where how .active gets set I can't help further.

[NovusOpus]

You can do it like this:

<ul class="text-red-700">
  <li>Option 1</li>
  <li>Option 2</li>
  <li class=" active:text-blue-700">Option 3</li>
</ul>

Or you can do it with @apply like @lukewarlow example.

[lukewarlow]

active:text-blue-700 isn't quite the same. The OP example CSS used an .active class. Where as the active variant use the :active pseudo class.

The variant is probably what @Liverpool09 wants but just worth pointing out the difference.

[gursewak-sohi]

@lukewarlow is right.