Error compiling when using 'iconColor' with a custom modifier

[mohamedsabil83]

Unlike default modifier, if I want to make a new modifier for select with different iconColor, it's must to add icon too or return an error. eg:

the default modifier (Work)

customForms: theme => ({
    default: {
        select: {
            backgroundColor: theme('colors.white'),
            iconColor: theme('colors.blue.700'),
        }
    },
}),

my light modifier (Not Work)

customForms: theme => ({
    light: {
        select: {
            backgroundColor: theme('colors.white'),
            iconColor: theme('colors.blue.700'),
        }
    },
}),

my light modifier (Work)

customForms: theme => ({
    light: {
        select: {
            backgroundColor: theme('colors.white'),
            iconColor: theme('colors.blue.700'),
            icon: iconColor => `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="${iconColor}"><path d="M15.3 9.3a1 1 0 0 1 1.4 1.4l-4 4a1 1 0 0 1-1.4 0l-4-4a1 1 0 0 1 1.4-1.4l3.3 3.29 3.3-3.3z"/></svg>`,
        }
    },
}),

[jorgebastida]

Having this exact same issue. The suggested workaround works well

[mohamedsabil83]

Glad that help you. But, when you move to tailwind v2, I advise you to do that, be sure to replace this package with the new one tailwindcss-forms