Creating Custom Utility Classes

1. Why Create Custom Utilities?

• Reduce repetition of long utility chains
• Define brand-specific styles (e.g., colors, spacing)
• Improve readability and maintainability

2. Define Utilities with `addUtilities`

Add custom utilities in your Tailwind plugin section:

/** tailwind.config.js **/
const plugin = require('tailwindcss/plugin');

module.exports = {
  content: ["./*.html"],
  theme: {
    extend: {},
  },
  plugins: [
    plugin(function({ addUtilities }) {
      const newUtilities = {
        '.text-shadow': {
          textShadow: '2px 2px 5px rgba(0,0,0,0.3)',
        },
        '.no-scrollbar': {
          '-ms-overflow-style': 'none',
          'scrollbar-width': 'none',
        },
        '.no-scrollbar::-webkit-scrollbar': {
          display: 'none',
        },
      };
      addUtilities(newUtilities);
    }),
  ],
};
            

3. Use Your Custom Utility

Once configured, use your new classes like any other Tailwind class:

<div class="text-shadow text-xl text-gray-800">
  Custom Shadow Text
</div>

<div class="overflow-y-scroll no-scrollbar h-40">
  Hidden scrollbar scrollable content
</div>
            

4. Best Practices

• Use a naming convention (`.custom-*`, `.u-*`) to avoid conflicts
• Keep custom utilities minimal and purposeful
• Group utilities logically in your plugin definition

Conclusion

Creating custom utility classes helps you tailor Tailwind to your design system. With plugins and `addUtilities`, you get the best of utility-first development and consistent design tokens.