Specificity issue with base styles

[dannyuk1982]

Because where: always has a specificity of 0 I am finding the base reset is overwriting the rule for a child, i.e

<div class="child:mb-5">
  <p>This will have a margin bottom of 0</p>
</div>

Swapping where: to is: might fix?

[SamGoody]

hmmm, not sure why that didn't show up in testing.

If we switch it to is I imagine that the parent would have a higher specificity than the child, which would be a problem when you want to override the rules.

<div class="child:mb-5">
  <p class="mb-3">Will this have a margin bottom of 5 (1.25rem) or 3 (0.75rem)</p>
</div>

I think I saw a write up on a hack putting the where into the is.... I am really limited on time this week, but can you test and see what happens with the is and child overrides?

Thanks!

[dannyuk1982]

If I get any time myself I will have a play!

[alexluong]

Hi, don't want to be that guy who just swings by and leaves a +1 but since there's no update on this, I just wanna check in and see how things are going.

Let me know if there's something I can do to help. Happy to find some time and dive into this as well!

[SamGoody]

Sorry, but am way overloaded at work.

In the latest versions of tailwind you can use arbitrary variants [&>*] and it will apply to all children with a higher specificity than the default rules.

<div class="[&>*:mb-5">
  <p>This will have a margin bottom of 0</p>
</div>

This has the disadvantage of clouting the children classes as well. The real fix is that the default style sheet (the normalize.css) should really have :where() added to remove all specifity from normalized files.

For now though, I hope this helps. Good luck!