@apply inheritance, is this expected?

[phegman]

I am seeing some inheritance with @apply that I would not expect. See https://play.tailwindcss.com/YgpNNlFOFi?file=css for an example. In that example I wouldn't expect "Nested foo bar" to be green but it is. Is this expected?

Here is the input and output of the example

Input

.foobar {
  @apply truncate;
}

.nested .truncate {
  color: green;
}

Output

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.foobar {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nested .foobar {
  color: green;
}
.nested .truncate {
  color: green;
}

[adamwathan]

Hey! Yeah this is expected although we are changing this in v4 to be closer to your original expectations I think.

Here's a previous write-up that explains it:

#10660 (comment)

TL;DR you've extended the definition of truncate, so @apply truncate needs to include that behavior.

Say you had this HTML before:

<div class="nested">
  <div class="truncate bg-red-500">
    ...
  </div
</div>

The idea with @apply is you are supposed to be able to extract some classes and have the behavior not change, so you want to be able to do this:

<div class="nested">
  <div class="my-class">
    ...
  </div
</div>

.my-class {
  @apply truncate bg-red-500;
}

The only way for that to actually work is to do what we do now in v3, otherwise given your example the text color would change when you extract .my-class. But in v4 we're just saying fuck it since so many people seem to find it unintuitive.

[phegman]

@adamwathan thanks for the quick reply and the explanation. That makes sense, it did catch me off guard and took a little while to understand what was going on 😁

In general I would highly recommend against ever using Tailwind classes in your own custom selectors because of these sorts of side effects.

This from #10660 (comment) is what we are going to try and do in the future to avoid this.

[phegman]

Sidenote: GitLab recently migrated from a homegrown CSS utils library to Tailwind and it has been a really nice improvement for us. Thanks for all your hard work, we love Tailwind!