How can I create a custom Tailwind plugin to add new utilities?

Ask any question about Tailwind CSS here... and get an instant response.

Post this Question & Answer:

How can I create a custom Tailwind plugin to add new utilities?

Asked on Dec 25, 2025

Answer

Creating a custom Tailwind plugin allows you to extend Tailwind's utility classes with your own custom styles. This is done by defining a plugin function that adds new utilities to Tailwind's configuration.

<!-- BEGIN COPY / PASTE -->
    const plugin = require('tailwindcss/plugin');

    module.exports = {
      plugins: [
        plugin(function({ addUtilities }) {
          const newUtilities = {
            '.text-shadow': {
              textShadow: '2px 2px #ff0000',
            },
            '.text-shadow-md': {
              textShadow: '3px 3px #ff0000',
            },
            '.text-shadow-lg': {
              textShadow: '4px 4px #ff0000',
            },
          };

          addUtilities(newUtilities, ['responsive', 'hover']);
        })
      ],
    };
    <!-- END COPY / PASTE -->

Additional Comment:

Use the "plugin" function from Tailwind to define new utilities.
The "addUtilities" method allows you to add custom CSS properties as utility classes.
Specify variants like "responsive" or "hover" to enable those features for your custom utilities.
Include the plugin in your Tailwind configuration file under the "plugins" array.

✅ Answered with Tailwind CSS best practices.

Ask any question about Tailwind CSS here... and get an instant response.

How can I create a custom Tailwind plugin to add new utilities?

Asked on Dec 25, 2025

Answer

Real Questions. Clear Answers.