Tailwind Plugin Generator
Scaffold a complete Tailwind CSS plugin without memorizing the API. Toggle the builder functions you need - addUtilities, addComponents, addBase, matchUtilities, and addVariant - then add editable rules, dynamic theme-driven values, and custom variants. Wrap it in plugin.withOptions for a configurable plugin, and export as JavaScript (CommonJS) or typed TypeScript (ESM). The plugin source updates live and the whole configuration is captured in the URL so you can share it.
About this ToolHow it works, benefits & use casesTap to collapse
Writing a Tailwind CSS plugin by hand means remembering which builder function to call, destructuring the right helpers, quoting every selector and CSS property correctly, and wiring a matching theme extension. This generator scaffolds all of it for you. Toggle exactly the builder APIs you need - addUtilities for static helper classes, addComponents for reusable component classes, addBase for element-level base styles, matchUtilities for dynamic theme-driven utilities, and addVariant for custom variants - and the generated plugin function only destructures the helpers you actually use. Add editable rules one at a time: a class name (or raw selector for base styles) plus any number of CSS property and value pairs. For matchUtilities you also define named values, and the tool writes the matching theme.extend block automatically so theme() resolves them. Choose your output target - JavaScript (CommonJS, using require and module.exports) or typed TypeScript (ESM, importing the plugin type and ending with a satisfies Config registration hint) - and wrap the whole thing in plugin.withOptions when you want a configurable plugin. Load a preset (text-shadow utilities, button components, typography utilities, debug screens, a dynamic tab-size matchUtilities example, custom variants, or a configurable withOptions plugin) to start from working code. The source updates live as you edit and the whole configuration is captured in the URL so you can share it.
How to Use
- 1Name the plugin and pick an output target: JavaScript (CommonJS) or TypeScript (ESM, typed).
- 2Toggle the builder APIs you want - addUtilities, addComponents, addBase, matchUtilities, addVariant - and only those appear in the plugin signature and body.
- 3Add rules: a class name or selector plus property and value pairs; stack multiple declarations per rule and multiple rules per API.
- 4For matchUtilities, set a name, CSS property, and theme key, then add named values - the matching theme.extend block is generated for you.
- 5Optionally enable Configurable plugin (plugin.withOptions), or click a preset to load a complete working example.
- 6Copy, download, or share the generated plugin, then add it to the plugins[] array shown in the registration hint.
Key Benefits
- Scaffolds plugin(function({ ... }) { ... }) with only the builder helpers you enable
- Covers addUtilities, addComponents, addBase, matchUtilities, and addVariant
- Generates the matching theme.extend block for matchUtilities so theme() resolves
- Exports JavaScript (CommonJS) or typed TypeScript (ESM, satisfies Config)
- Optional plugin.withOptions wrapper for configurable plugins
- Seven presets including typography, debug screens, dynamic utilities, and custom variants
- Live output and full shareable-URL state, all running in your browser
Common Use Cases
- Adding a text-shadow or text-wrap utility scale that Tailwind does not ship by default
- Packaging reusable .btn / .btn-primary component classes for a design system
- Creating a dynamic, theme-driven utility (like tab-2 / tab-4) with matchUtilities
- Registering a custom variant such as hocus for combined hover and focus styling
- Producing a typed TypeScript plugin for a Tailwind config written in TypeScript
Copy, download, or share - paste into your plugins[] array
const plugin = require('tailwindcss/plugin');
module.exports = plugin(
function ({ addUtilities, theme }) {
addUtilities({
'.text-shadow': {
'text-shadow': '2px 2px 4px rgba(0, 0, 0, 0.1)',
},
'.text-shadow-lg': {
'text-shadow': '8px 8px 16px rgba(0, 0, 0, 0.2)',
},
});
},
);
// tailwind.config.js
// module.exports = {
// plugins: [require('./plugins/myPlugin')],
// };Plugin
Accepts an options argument so users can customize the plugin when registering it.
Load preset
Utilities (addUtilities)
Every builder API in one scaffolder
Toggle addUtilities, addComponents, addBase, matchUtilities, and addVariant independently. The plugin function signature only destructures the helpers you actually use, and matchUtilities reads its values from a matching theme.extend block the tool writes for you.
JavaScript or TypeScript
Choose CommonJS (require / module.exports) or typed ESM with import plugin from 'tailwindcss/plugin' and a satisfies Config registration hint. Wrap it in plugin.withOptions for a configurable plugin.
Was this tool helpful?
Share Your Experience
Help others discover this tool!
Related tools
- JavaScript FormatterFormat and beautify JavaScript code
- Changelog GeneratorGenerate changelog from Git commit history
- Component Name GeneratorTurn a description into ranked, kind-aware component names with a file scaffold and a name validator (casing, collisions, clarity)
- Heroku Procfile GeneratorBuild a Heroku Procfile and matching app.json — process types, env vars, addons, dyno formation — plus a Procfile parser and audit
- Markdown TOC GeneratorGenerate table of contents for Markdown
- Package.json Scripts GeneratorGenerate common npm scripts for different project types and workflows
They are the builder functions Tailwind passes to a plugin. addUtilities registers static, low-specificity helper classes. addComponents registers reusable component classes (like .btn) that utilities can still override. addBase applies styles directly to element selectors such as body or h1. matchUtilities registers dynamic utilities whose values come from the theme, so one definition produces a whole family (tab-2, tab-4, and so on). addVariant registers custom variants like a hocus variant that combines hover and focus. Toggle any combination and the generated plugin only destructures the helpers you enabled.
matchUtilities takes a map of utility names to functions that receive a value and return CSS, plus a values option. This tool wires that values option to theme() for the theme key you choose, and it also generates the matching theme.extend block holding your named values. So if you define a tab utility on the theme key tabSize with values 2 and 4, the output both calls matchUtilities({ tab: ... }, { values: theme('tabSize') }) and adds tabSize under theme.extend, giving you tab-2 and tab-4 out of the box.