Official Tailwind Plugins

Tailwind's official plugins extend the framework with patterns it doesn't cover by default. Three are essential for production apps.

Install

npm install @tailwindcss/typography @tailwindcss/forms @tailwindcss/container-queries

// tailwind.config.js
export default {
  plugins: [
    require("@tailwindcss/typography"),
    require("@tailwindcss/forms"),
    require("@tailwindcss/container-queries"),
  ]
}

Typography plugin

<!-- Style CMS or markdown content -->
<article class="prose prose-lg max-w-none prose-blue">
  {{ content }}
</article>

<!-- Dark mode variant -->
<article class="prose dark:prose-invert"></article>

Forms plugin

Adds cross-browser consistent base styles to all form elements. After installing, form elements render cleanly without manual reset styles. Override with Tailwind utilities as usual.

Container queries

<div class="@container">
  <div class="grid @md:grid-cols-2 @lg:grid-cols-3">
    <div>Card</div>
    <div>Card</div>
  </div>
</div>

Container queries solve the sidebar problem: a grid that reflows based on its container width, not the viewport. Mark the parent with @container, then use @md:, @lg: on children.