Add Tailwind custom class

June 06, 2024

Using plugins and addUtilities method we can add custom classes to Tailwindcss.

Example adding scrollbar-gutter support to Tailwindcss.

/** @type {import('tailwindcss').Config} */
export default {
  // ...
  theme: {
    extend: {
      // ...
      // Create the properties
      scrollbarGutter: {
        stable: 'stable',
        unset: 'unset',
        'both-edges': 'both-edges'
      }
    }
  },
  plugins: [
    // ...
    function ({ addUtilities }) {
      const newUtilities = {
        // Set the class name
        '.scrollbar-stable': {
          scrollbarGutter: 'stable'
        },
        '.scrollbar-both-edges': {
          scrollbarGutter: 'both-edges'
        },
        '.scrollbar-unset': {
          scrollbarGutter: 'unset'
        }
      }

      addUtilities(newUtilities, ['responsive', 'hover'])
    }
  ]
}