Plugins Overview
Extend Tailwind with official and community plugins.
Syntax
plugins: [require("@tailwindcss/typography")]Plugins add ready-made utilities and components. Popular official plugins include:
- Typography (
prose) — beautiful defaults for long-form HTML. - Forms — sensible base styles for inputs.
- Aspect ratio — responsive media boxes.
You register plugins in your Tailwind config. The demo shows the kind of clean article styling the typography plugin produces.
Example
Loading editor…
Press Run to see the result.
When to use it
- A developer adds @tailwindcss/typography to get the prose class that automatically styles CMS-generated HTML content.
- A form-heavy app installs @tailwindcss/forms to get sensible cross-browser base styles for all form elements with minimal configuration.
- A developer writes a custom Tailwind plugin to generate text-shadow utility classes that Tailwind does not include by default.
More examples
Typography plugin setup
Adding @tailwindcss/typography to the plugins array makes the prose class available for styling long-form HTML content automatically.
// tailwind.config.js
module.exports = {
plugins: [
require('@tailwindcss/typography'),
],
}prose class in markup
The prose class from @tailwindcss/typography applies well-spaced, readable styling to all HTML elements inside the article.
<article class="prose lg:prose-xl mx-auto">
<h1>Article Title</h1>
<p>Body paragraph with <strong>bold</strong> and <a href="#">links</a>.</p>
<ul>
<li>List item one</li>
<li>List item two</li>
</ul>
</article>Custom plugin utility
A custom plugin registers new utility classes for text-shadow, making them available with the same variant support as built-in utilities.
// tailwind.config.js
const plugin = require('tailwindcss/plugin');
module.exports = {
plugins: [
plugin(function ({ addUtilities }) {
addUtilities({
'.text-shadow-sm': { textShadow: '0 1px 2px rgba(0,0,0,0.2)' },
'.text-shadow': { textShadow: '0 2px 4px rgba(0,0,0,0.3)' },
});
}),
],
}
Discussion