From 3.2.4 to 3.2.6 a break is happening!

[frederikhors]

From 3.2.4 to 3.2.6 a break is happening!

https://play.tailwindcss.com/B6VBq76Yte

With 3.2.4 I can see the border for the button.

From 3.2.6 I cannot anymore.

In the REPL I removed border-transparent to make the gray-border visible again.

[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 color you want. For example if you use JavaScript you could write something like:

function MyReactButtonComponent({ variant, children }) {
  return <button className={variant === 'primary' ? 'bg-red-500' : 'bg-blue-500'}>{children}</button>
}

If you look at your link, this is also what's happening, you have border-transparent border-gray-300 which are competing classes.

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-transparent border-gray-200 in one file, and created a new file with border-gray-200 border-transparent that happens to be scanned first.

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!