Ask any question about Tailwind CSS here... and get an instant response.
Post this Question & Answer:
How can I create a custom Tailwind plugin for new utility classes?
Asked on Apr 27, 2026
Answer
Creating a custom Tailwind plugin allows you to extend Tailwind's functionality with your own utility classes. This involves defining a plugin function that adds new utilities to Tailwind's core.
<!-- BEGIN COPY / PASTE -->
const plugin = require('tailwindcss/plugin');
module.exports = {
plugins: [
plugin(function({ addUtilities }) {
const newUtilities = {
'.text-shadow': {
textShadow: '2px 2px 4px rgba(0, 0, 0, 0.1)',
},
'.text-shadow-md': {
textShadow: '3px 3px 6px rgba(0, 0, 0, 0.1)',
},
};
addUtilities(newUtilities, ['responsive', 'hover']);
})
],
};
<!-- END COPY / PASTE -->Additional Comment:
- Use the "plugin" function from Tailwind to define your custom utilities.
- The "addUtilities" function allows you to add new CSS rules, specifying variants like "responsive" or "hover".
- Place this configuration in your "tailwind.config.js" file to integrate it with your Tailwind setup.
- Ensure your custom utilities do not conflict with existing Tailwind classes.
Recommended Links:
