Plugins and the Official Plugin Suite

8 min read

Extending Tailwind with Plugins

Plugins add new utilities, components, or variants to Tailwind. In v4, plugins are registered with @plugin in your CSS file.

css

@import "tailwindcss";
@plugin "@tailwindcss/typography";
@plugin "@tailwindcss/forms";
@plugin "@tailwindcss/aspect-ratio";

Official Plugins

@tailwindcss/typography — adds the prose class that styles raw HTML (blog posts, markdown output) with sensible defaults.
@tailwindcss/forms — resets form element styles so they are easier to restyle with utilities.
@tailwindcss/aspect-ratio — provides aspect-{ratio} utilities for responsive media embeds.
@tailwindcss/container-queries — adds @{breakpoint}: variants based on a parent container's width rather than the viewport.

html

<article class="prose prose-slate prose-lg dark:prose-invert max-w-none">
  <!-- Raw HTML from a CMS or markdown renderer renders beautifully -->
  <h1>Article Title</h1>
  <p>Content with proper spacing, heading sizes, and link styles.</p>
</article>

The prose class from @tailwindcss/typography is used on content-heavy sites like CPCODELAB's blog section to style markdown-rendered lesson content without hand-crafting every tag style.

Ready to test yourself?

Practice Tailwind CSS— quiz & coding exercises