Plugins

Add functionality with first-party plugins like forms and typography, or your own, registered directly from CSS via @plugin.

4 min read Level 2/5 #tailwind#plugins#customization

What you'll learn

Register a plugin with @plugin
Use the official forms and typography plugins
Write a small inline custom plugin

Plugins extend Tailwind with extra utilities, components, and variants. In v4 you register them from your CSS entry with @plugin — no JavaScript config file needed.

Registering Official Plugins

After installing them, point at the package names:

@import "tailwindcss";

@plugin "@tailwindcss/forms";
@plugin "@tailwindcss/typography";

@tailwindcss/forms normalizes native form controls so they are easy to style. @tailwindcss/typography adds the prose class for beautiful long-form content:

<article class="prose lg:prose-xl">
  <h1>Rendered Markdown looks great with zero per-element classes</h1>
</article>

Custom Plugins

A plugin is a JS module that hooks into the build. Reference the file from CSS the same way:

@plugin "./plugins/tap-highlight.js";

# plugins/tap-highlight.js
module.exports = function ({ addUtilities }) {
  addUtilities({
    '.tap-transparent': { '-webkit-tap-highlight-color': 'transparent' },
  })
}

addUtilities adds static utilities, matchUtilities adds parameterized ones, and addVariant adds new variant prefixes.

When to Use a Plugin

For one or two declarations, @utility and @custom-variant in CSS are simpler. Reach for a JS plugin when logic is involved — generating a family of utilities programmatically, or packaging behaviour for reuse across projects. Either way, v4 loads it straight from the CSS entry, keeping configuration in one place.

Sharing Theme Across Projects →