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



Saved you some valuable time?

Buy me a drink 🍺