Issue with border color not overriding

[jiblett1000]

What version of Tailwind CSS are you using?

v3.2.6

What build tool (or framework if it abstracts the build tool) are you using?

nuxt 3.2

What version of Node.js are you using?

18.14

What browser are you using?

chrome

What operating system are you using?

fedora 37

Reproduction URL

https://github.com/jiblett1000/tailwind-classes

Describe your issue

Hello,

Something in either 3.2.5 or 3.2.6 has messed up class cascading for border colors. The other border classes seem to be ok, but there could be other classes affected as well, idk. When using something such as someVar && "overrideClass", it will not override any previous border color on that tag, component, etc. See the reproduction...

[masedri]

same problem with Fallthrough Attributes with class tailwinds, don't overwrite

[RobinMalfait]

Hey! Thank you for your bug report!
Much appreciated! 🙏

We have a guaranteed order in our utilities so that the output is deterministic, that means that whenever you apply pl-4 that it will win from px-4 which will win from p-4.

That said, there are also places where there is no "hierarchy" between utilities. For example bg-red-500 vs bg-blue-500. In these cases we used to generate the first utility we found first. But this has a few flaws because while you should not rely on the order it generated styles in, it could also be that you introduced a new file that would have been scanned first and that resulted in a different output (swapped order). This breaks systems that rely on a deterministic output and making it deterministic it also means that you can leverage caching since the files should only change if an actual change in the generated CSS happens.

The problem exists in your HTML in this case, let's say you have 2 buttons, and you write them like this:

<button class="bg-blue-500 bg-red-500">Button A</button>
<button class="bg-red-500 bg-blue-500">Button B</button>

The order in your HTML does not determine the order classes are applied in, that's all part of the CSS Specificity. This means that there is no way to make these button have different background colors.

The solution to this problem is to only apply the actual border color you want.

<input
  type="text"
  placeholder="Input"
  :class="[
    'py-4 px-6 rounded-xl border bg-neutral-200 placeholder-neutral-500 w-64',
    classVar ? 'border-green-500' : 'border-neutral-500',
  ]"
/>

But because we made the output more deterministic this now exposes the flaw in your HTML.

You would have run into this issue already if you wrote border-green-500 border-neutral-500 in one file, and created a new file with border-neutral-500 border-green-500 that happens to be scanned first. (or the other way around)

So in short, I would suggest to make sure that you only apply a single class instead of both those competing classes.

Hope this helps!

---

@masedri I don't know what that means, if my explanation from above doesn't apply to your situation, could you create a new issue with a minimal reproduction repo attached so that we can take a look?

[masedri]

Hi @RobinMalfait

it s a similar problem, the answer is cool, thanks for your time. In vue there is Attribute Inheritance from parent component to child https://vuejs.org/guide/components/attrs.html#fallthrough-attributes

maybe the other option could be apply ! in the parent utility class to override child utility class, what do u think?

[jiblett1000]

@RobinMalfait Hey, thanks for the great response! I'm wondering if this is in the docs somewhere that I possibly missed. If not, this would be a great addition. I know it would require framework specific examples, but it would potentially save others tons of refactoring as it effectively eliminates the use of the && operator (at least in a lot of instances). Anyhow, I'm gonna get to it. Thanks again :)

[jiblett1000]

@masedri If I remember correctly, doing things this way isn't ideal as it doesn't guarantee the intended behavior. Although, making a class important would be a solution I would think. I think a better way may be to pass the class(es) in a prop and handle them from within the component. But, @RobinMalfait probably has a better answer for you.

[masedri]

@jiblett1000 @RobinMalfait
In the end we found a more optimal solution, reduce the specificity of the base classes, so that the parent classes override the children.

Using the :where() pseudo selector, https://developer.mozilla.org/en-US/docs/Web/CSS/:where

How to do it using Tailwind?

Add a new variant called initial to the Tailwind plugins:

//tailwind.config.js

module.exports = { 
  plugins: [
    function ({ addVariant }) {
      addVariant("initial", "html :where(&)");
    }
  ]
}