Important classes not being overridden by later declared important classes

[secondmanveran]

What version of Tailwind CSS are you using?

3.0.24

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

Vite 2.9.9

What version of Node.js are you using?

18.2.0

What browser are you using?

Chrome/Brave

What operating system are you using?

macOS Monterey 12.4

Reproduction URL

https://play.tailwindcss.com/cBf0Fn8XYF

Describe your issue

The link above is using plain html and a style tag but I'm coming across this error in Vue 2.

In the version I was using prior to 3.0.24 I believe it was 3.0.23 but it was updated by dependabot so I can't be sure the exact previous version, previously set classes were overridden by classes added later.

Tailwind is implemented using the following config keys:

prefix: 'tw-',
important: true

Consider the following simple button component:

<script>
export default {
  props: {
    success: {
      type: Boolean,
      default: false
    }
  }
}
</script>
<template>
  <div>
    <button class="tw-bg-blue-500 tw-text-white" :class="{ 'tw-bg-green-500': success }">Dynamic Button</button>
  </div>
</template>

If the success prop is passed into the component the button background used to be green as the green class was set on the button after the original blue class.

But now, that class tw-bg-green-500 is not being implemented and the original tw-bg-blue-500 remains.

In the inspector I can see both classes, but the green class is marked through.

Perhaps this is not a bug but a feature, to correct the fact that the original !important was able to be overridden, but I wanted to report it in case, it's definitely screwing up my ui.

[adamwathan]

Hey! If I'm understanding correctly you are saying that in previous versions of Tailwind, the order of the classes in the class attribute impacted the rendered style, like:

<button class="bg-red-500 bg-green-500">I'm green</button>
<button class="bg-green-500 bg-red-500">I'm red</button>

This just isn't possible though, it's not how the browser works. The only thing that matters is the order of the styles in the CSS file, not the order in the class attribute.

Here's an example using no Tailwind at all that demonstrates it:

https://jsfiddle.net/tefxs2da/

You shouldn't ever be adding "conflicting" classes at the same time (like two different background color classes) because the result is non-deterministic in Tailwind, and in our VS Code plugin (and in Play) we actually underline it as an error:

The solution in your case is to only ever apply one background color class at a time, like:

<template>
  <div>
    <button class="tw-text-white" :class="{ 'tw-bg-green-500': success, 'tw-bg-blue-500': !success }">Dynamic Button</button>
  </div>
</template>

This has been true since the very first Tailwind release back in 2017 so if you weren't running into it before it was just out of luck, because the class you were adding to override the other class must have happened to come later in the stylesheet.

Hope that helps!

[secondmanveran]

This is the method I'm using now to fix all the items that are now broken.

Strange indeed.

Thanks @adamwathan

[joelbyrd]

To add to @adamwathan's answer, here's another demonstration that's a little easier to see, and also uses !important - https://codepen.io/joelbyrd/pen/ByBWXdx