Tailwind CSS Plugins
Plugins allow you to extend Tailwind CSS with additional utilities, components, or base styles. The Tailwind team maintains a set of official first-party plugins for common use-cases, and you can also write your own.
As Tailwind has evolved, many features that previously required plugins (like container queries and aspect ratio support) have been promoted into the core framework. Even so, there are still some official plugins that remain valuable additions, particularly for complex prose styling and opinionated form resets.
Official Plugins
The official Tailwind CSS plugins are maintained by the Tailwind team and are published as separate NPM packages. Here is a summary of the main ones:
| Plugin | Package | What It Provides |
|---|---|---|
| Typography | @tailwindcss/typography |
A prose component class that applies beautiful, readable typographic defaults to blocks of HTML you don't control (e.g. CMS content or Markdown output). |
| Forms | @tailwindcss/forms |
An opinionated base reset for form elements (<input>, <select>, <textarea>, etc.) that makes them easier to style consistently with Tailwind classes. |
We'll look at these in more detail below.
The Typography Plugin
The Typography plugin solves a fundamental challenge in that Tailwind resets all browser default styles. This means a raw block of HTML content (like a Markdown-rendered blog post) will look completely unstyled. The prose class re-applies sensible, beautiful typographic defaults to that content.
Installation
Setup (Tailwind v4)
Add the plugin import to your main CSS file:
Usage
Wrap any HTML content block with the prose class. The plugin also provides size variants (prose-sm, prose-lg, prose-xl, prose-2xl) and a dark mode variant (prose-invert).
The color variant (e.g., prose-slate, prose-zinc, prose-stone) controls the base text and heading colors, making it easy to match your brand palette.
The Forms Plugin
By default, browsers style form elements differently from each other, and Tailwind's base reset strips much of that, leaving inputs looking quite bare. The Forms plugin applies a consistent, minimal baseline to all form controls so they look clean and are easy to build on.
Installation
Setup (Tailwind v4)
Once installed, form elements automatically receive the reset styles, and you can override any of them with standard Tailwind utility classes. The plugin supports two strategies via a configuration option:
base(default): Applies the reset globally to all form elements.class: Only applies the reset when you add aform-input,form-select,form-textarea, etc. class explicitly. This is useful if you need to mix styled and unstyled inputs on the same page.
Build Tool Integrations
Alongside the design-system plugins above, the Tailwind team also publishes a set of build tool integrations. These are a different kind of package. Rather than adding new CSS utilities, they handle how Tailwind's CSS is compiled as part of your project's asset pipeline. They are sometimes loosely referred to as "plugins" because they integrate into a tool's plugin system.
| Integration | Package | What It Does |
|---|---|---|
| Vite | @tailwindcss/vite |
First-class integration for Vite. Provides fast HMR and no PostCSS setup required. Recommended for all new Vite-based projects. |
| Webpack | @tailwindcss/webpack |
Introduced in Tailwind CSS v4.2 (February 2026), this provides first-class Webpack support without needing extra PostCSS configuration or "glue code". It's particularly useful for existing Webpack projects (e.g., legacy React, Angular, or Rails Webpacker setups) that want to migrate to Tailwind. |
| PostCSS | @tailwindcss/postcss |
The universal fallback integration. Works with any build tool that supports PostCSS (Next.js, Nuxt, Parcel, etc.). If no dedicated integration exists for your tool, use this. |
To use the webpack integration, install the package and add it to your webpack.config.js:
Writing Custom Plugins
You can create your own plugins to package reusable utilities or components that aren't in the core. In Tailwind v4, the recommended approach is to use @utility blocks in your CSS, which keep everything in one file without needing a tailwind.config.js.
Custom Utilities with @utility
This makes scrollbar-hide available as a Tailwind class, with full support for variants like hover:scrollbar-hide and responsive prefixes like md:scrollbar-hide.
JS-Based Plugins (v3 Style, Still Supported)
For more complex scenarios, or if you need to share a plugin across projects as an NPM package, you can still use the JavaScript plugin API via tailwind.config.js:
In the next page, we'll look at some best practices for working with Tailwind CSS in a real-world project.