On gists

Tailwind addCustom component

Tailwind CSS

tailwind.config.js Raw #

const plugin = require('tailwindcss/plugin')

module.exports = plugin(({ addComponents }) => {
  addComponents({
    '.text-h1': {
      '@apply text-lg md:text-2xl lg:text-3xl': {},
      '@apply text-red-400 md:text-green-500 lg:text-blue-600': {},
      '@apply leading-relaxed': {},
    },
  });
  
  // 
  module.exports = {
  // ...
  plugins: [
    plugin(function ({ addComponents, theme }) {
      addComponents({
        '.card': {
          backgroundColor: theme(colors.white),
          borderRadius: theme(borderRadius.lg),
          padding: theme(spacing.6),
          boxShadow: theme(boxShadow.xl),
        }
      })
    })
  ]
}