buttons.tailwind.js

module.exports = plugin(function({ addComponents, theme }) {
  let base = {
    borderRadius: '20px',
    padding: '10px 30px',
    fontWeight: 'bolder',
  };

  const newComponents = {
    '.button-blue': {
      ...base,
      background: theme('colors.blue.500'),
    },
    '.button-red': {
      ...base,
      background: theme('colors.red.600'),
    }
  };

  addComponents(newComponents, {
    variants: ['responsive', 'hover'],
  })
});