disabled prefix does not work

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

[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.