Jan 28, 2021 in Tailwind css

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'),
  ]
}