How to create custom utilities or components in Tailwind?

Creating custom utilities or components in Tailwind lets developers encapsulate repetitive styles or design patterns into reusable, maintainable pieces, improving consistency and productivity.

You define custom utilities or components in Tailwind by extending its configuration file (tailwind.config.js) with new keys under the theme or by using the @layer components directive in CSS. This lets you create design tokens like colors or spacing, or reusable classes such as buttons or cards that can be used throughout the app. Using plugins like matchComponents enables dynamic, parameterized components for even greater flexibility.

Step 1:- 

‍Extend Tailwind’s default theme in the tailwind.config.js file, adding new colors, spacing, fonts, or other design tokens under the extend property. 

For example:

Code

module.exports = {
  theme: {
    extend: {
      colors: {
        'custom-blue': '#1e40af',
      },
      spacing: {
        '72': '18rem',
      },
    },
  },
}
      

‍Step 2:-

‍Use the @layer utilities directive in your CSS to write custom utility classes with Tailwind’s @apply feature, enabling reuse of existing utilities inside your own class:

Code

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .btn-custom {
    @apply bg-custom-blue text-white font-bold py-2 px-4 rounded;
  }
}
      

Step 3:-

‍Create custom plugins via JavaScript for more flexible utilities or components by leveraging Tailwind’s plugin API:

Code

const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ addUtilities, theme }) {
      const newUtilities = {
        '.text-shadow': {
          textShadow: '2px 2px #ff0000',
        },
      }
      addUtilities(newUtilities, ['responsive', 'hover'])
    })
  ]
}