Multiple psuedo selectors

[jaredmeakin]

Trivial example, but how would one enable variant support for multiple pseudo selectors?

.button:hover:enabled {
   cursor: pointer;
}

.button:hover:disabled {
   cursor: not-allowed;
}

Thanks!

[cytRasch]

You can achieve this by writting yout own little plugin:

const plugin = require('tailwindcss/plugin')

module.exports = {
    theme: {
        extend: {},
    },
    variants: {},
    plugins: [

        plugin(function({ addComponents }) {
            
            const extendedButtons = {
                '.button': {
                    '&:hover': {

                        '&:disabled': {
                            cursor: 'not-allowed'
                        },

                        '&:enabled': {
                            cursor: 'pointer'
                        }
                    }

                },
            }
            addComponents(extendedButtons)
        })
    ],
}

This will auto-create your css with this variant-concatination.