disabled prefix does not work

[kuechlerm]

Describe the problem:

Classes do not work with disabled: prefix.

tailwind version 1.9.5

Link to a minimal reproduction:

https://play.tailwindcss.com/90FYlNEnqN

[JNavith]

Enable the disabled variant for backgroundColor:

  variants: {
    backgroundColor: ({ after }) => after(["disabled"]),
    // This will become
    // extend: {
    //   backgroundColor: ["disabled"],
    // }
    // in Tailwind CSS 2.0
  },

[adamwathan]

Yep as @JakeNavith mentioned you need to enable the disabled variant, it's not enabled by default:

https://play.tailwindcss.com/7hDuL9Gnwu?file=config

[kuechlerm]

I see. Thanks. It came a bit as a surprise when you look at the docs : https://tailwindcss.com/docs/pseudo-class-variants#disabled

[alexbu92]

It's still not working for me, here is my tailwind.config.js:

module.exports = (isProd) => ({
    prefix: "",
    purge: {
        enabled: false,
        content: [
            "**/*.html", "**/*.ts"
        ],
        options: {
            safelist: [
                "type" // [type='checkbox']
            ]
        },
        preserveHtmlElements: true
    },
    darkMode: false, // or 'media' or 'class'
    theme: {
        extend: {}
    },
    variants: {
        extend: {
            opacity: [
                "disabled"
            ],
            backgroundColor: [
                "disabled"
            ],
            cursor: [
                "disabled"
            ]
        }
    },
    plugins: [
        require("@tailwindcss/forms")
    ]
});

[doom-goober]

For anyone confused by this problem, here's REPL with the entire solution: https://play.tailwindcss.com/Hxe9LondgZ?file=config

First, notice in the config, we've specified all the variants that are applicable to backgroundColor:
backgroundColor: ['responsive', 'hover', 'focus', 'active', 'disabled']

The documentation says this is necessary because even if you extend a variant array always replaces any other existing variants. So, if you don't list out every variant and only put "disabled" you will only be enabling "disabled" and essentially turning everything else off that is optional (hover, focus, and active in this case, as those are the ones we want.) Next, notice that "disabled" is the last item in the list, giving it the highest precedence. We want disabled to overrule everything else.

Next, notice that the classes for hover, active, and disabled are all modifying the same CSS Attribute: backgroundColor (in Tailwind, "bg-"):
<button class="p-8 bg-green-800 hover:bg-yellow-400 active:bg-blue-800 disabled:bg-red-800" disabled>Should be red</button>

This is important, because while disabled overrules hover if you specify the following:
text-white hover:text-gray disabled:bg-red-800

You will get incorrect behavior: The text will be white when the button is just sitting there, the text will be white when disabled, but the text will turn gray when you hover! But the button is disabled right? So it shouldn't response to hover! But hover is still being applied by CSS even though the button is disabled. That's just how CSS works.

So, in Tailwind, you'd have to use:
text-white hover:text-gray disabled:text-white disabled:bg-red-800

Text is white when it's just sitting there. Gray when hovered and enabled. When it's disabled and hovered, its white because disabled overrules hover and white wins over Gray.

TLDR: 1) Specify all the variants in your config, not just the ones you are adding. 2) Your disabled: styling must "undo" all the attributes that hover:, focus:, and active: set to make the button seem like it's fully disabled.

[cjaoude]

As others noted, update the config in this way, typically needed classes to style a disabled state...

    variants: {
        extend: {
            cursor: ['disabled'],
            pointerEvents: ['disabled'],
            backgroundColor: ['disabled', ...],
        },
    },

Then for example disabled:bg-gray-200 would override hover:bg-blue-500.

Some useful classes:

• disabled:cursor-auto
• disabled:pointer-events-none

[raymclee]

cursor: ['disabled'],
pointerEvents: ['disabled'],
backgroundColor: ['disabled', ...],

not working for me, the hover state still apply

[snelgrove]

If anyone is still having trouble, I had to add @apply disabled:pointer-events-none to prevent the hover state being applied.

[divmgl]

If anyone is still having trouble, I had to add @apply disabled:pointer-events-none to prevent the hover state being applied.

+1000 to this. It's the only thing that worked for me. Cheers.

[keytrap-x86]

If anyone still having this problem this is what worked for me :
I was trying to change the background of a button so that it was bg-gray-700 on disabled and bg-blue-600 when enabled.
I just added a enabled:bg-blue-600 disabled:bg-gray-700 (basically just add enabled: in front of your property).
What is still strange is that I didn't have to do this for the text color. Having text-white disabled:text-gray-200 was sufficient.