The Tailwind Plugin API
Learn the plugin() function signature, access addUtilities, addComponents, addBase, and addVariant helpers to extend Tailwind's output.
Why Write Tailwind Plugins?
Tailwind's built-in utilities cover the vast majority of CSS needs, but there are gaps. You might need a scrollbar-hide utility, a text-shadow family, or a custom variant like not-last:. Rather than writing raw CSS outside of Tailwind's system, plugins let you add these extensions using the same configuration-driven approach as the rest of Tailwind. Plugins keep your extensions discoverable, consistent, and configurable.
The plugin() Function
Tailwind plugins are registered in the plugins array of tailwind.config.js. Each plugin is defined using the plugin() function from the tailwindcss/plugin package. The function receives a callback that gets four helpers: addUtilities, addComponents, addBase, and addVariant. These helpers inject styles into Tailwind's layer system at the correct position in the generated CSS.
// tailwind.config.js
const plugin = require('tailwindcss/plugin');
module.exports = {
content: ['./src/**/*.{html,js}'],
theme: { extend: {} },
plugins: [
plugin(function({ addUtilities, addComponents, addBase, addVariant }) {
// Your extension code here
})
]
};