Dark Theme :focus and :disabled not working as intended

[tance77]

Having a dark theme with a focus effect doesn't seem to work as intended. I expect the border to change to red when I focus an input text field but it just doesn't change at all. Also removing the default :focus and :disable renders different results on the dark theme focus when focused.

Am I doing this wrong?

module.exports = {
    theme: {
        customForms: theme => ({
            dark: {
                'input, select, checkbox, multiselect, textarea': {
                    backgroundColor: theme('colors.transparent'),
                    borderColor: theme('colors.blue.900'),
                    color: theme('colors.white'),
                },
                input: {
                    '&:focus': {
                        boxShadow: undefined,
                        borderColor: theme('colors.red.200'),
                    },
                    '&:disabled': {
                        backgroundColor: theme('colors.gray.700'),
                        opacity: 0.4,
                    },
                },

            },

            default: {
                'input, select, textarea': {
                    backgroundColor: theme('colors.transparent'),
                    '&:focus': {
                        boxShadow: undefined,
                        borderColor: theme('colors.gray.800'),
                    },
                    '&:disabled': {
                        backgroundColor: theme('colors.gray.100'),
                        opacity: 0.4,
                    },
                },

                checkbox: {
                    width: theme('spacing.6'),
                    height: theme('spacing.6'),
                },
            },

            sm: {
                'input, textarea, multiselect, select': {
                    fontSize: theme('fontSize.sm'),
                    padding: `${theme('spacing.1')} ${theme('spacing.2')}`,
                },
                select: {
                    paddingRight: `${theme('spacing.4')}`,
                },
                'checkbox, radio': {
                    width: theme('spacing.3'),
                    height: theme('spacing.3'),
                },
            },
        }),
    },
    plugins: [
        require('@tailwindcss/custom-forms'),
    ],
};

[tance77]

Was an applied style override happening.