Tailwind custom forms is a great plugin to quickly theme your form elements. This snippet guides you through some set-up. In this example of tailwind.config.js you see I've declared my own color myCustomColor and use it as the color of my checkbox element: 'color': theme('colors.myCustomColor').
This way I'm twice as quick: I get nice looking forms by default and I'm able to theme them in nice way.
module.exports = {
theme: {
extend: {},
colors: {
myCustomColor: '#227B6A',
},
customForms: theme => ({
default: {
checkbox: {
'borderRadius': undefined,
'color': theme('colors.myCustomColor'),
'&:focus': {
boxShadow: undefined,
borderColor: undefined,
},
}
}
})
},
variants: {
gridAutoFlow: ['responsive', 'hover', 'focus'],
},
corePlugins: {
container: false
},
plugins: [
require('@tailwindcss/custom-forms'),
]
}