The order of generated css for `hover` and `disabled` state reversed

[fer-ri]

Hi

with this plugin being active, then the generated css becomes reversed between hover and disabled state. That mean, disabled:bg-gray-200 does not work as expected, to fix it we must use the important mark disabled:!bg-gray-200

<button class=" bg-indigo-500 hover:bg-indigo-600  disabled:bg-gray-200" disabled>My Button</button>

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {},
  },
  plugins: [
    require('tailwind-scrollbar'),
  ],
}

.disabled\:bg-gray-200:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
}

.hover\:bg-indigo-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(79 70 229 / var(--tw-bg-opacity));
}

The normal generated css should be like this

.hover\:bg-indigo-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(79 70 229 / var(--tw-bg-opacity));
}

.disabled\:bg-gray-200:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
}

Thanks

[adoxography]

Hi, thanks for the detailed report! I was able to track down the issue. This'll be fixed in the next release.

[fer-ri]

Thanks a lot for very fast response :+1:

[adoxography]

3.0.1 is out and includes the bugfix for this. :)

[fer-ri]

3.0.1 is out and includes the bugfix for this. :)

Thanks a lot :pray: