# Official Plugins

**SHOULD** · **ID:** `content-official-plugins` · **Category:** content
**Source:** [Tailwind](https://tailwindcss.com/docs)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/content-official-plugins

> SHOULD: Use official plugins (@tailwindcss/typography for prose, @tailwindcss/forms for inputs)

Load the plugins you actually still need with @plugin in CSS, and drop the ones v4 absorbed into core

Two things changed in v4 and stale advice gets both wrong. First, how plugins load: there is no `plugins: []` array, because there is no config file. A plugin is imported from your stylesheet with `@plugin "@tailwindcss/typography";` next to the `@import "tailwindcss"` at the top. Second, and more important, *which* plugins are still plugins. `@tailwindcss/container-queries` is deprecated — container queries are core now, so `@container` and `@md:` work out of the box. Installing that package today does not add a feature; it adds a dead dependency that shadows a built-in and tells the next reader this codebase has not been upgraded. What survives is the stuff that is genuinely opinionated content styling rather than a CSS primitive: `@tailwindcss/typography` for the `prose` classes, which is still the right answer for markdown and CMS output you do not control, and `@tailwindcss/forms` for normalizing native control appearance. Before adding any plugin to a v4 project, check whether core already does it — the same absorption happened to several utilities that used to require a package.

## Bad — do not do this

`content-official-plugins-bad`

```tsx
export function OfficialPluginsBad() {
  return (
    <div className="w-full max-w-md space-y-4">
      <div className="bg-card border border-border rounded-lg p-4">
        <h4 className="font-medium mb-1">Registering plugins the v3 way</h4>
        <p className="text-xs text-muted-foreground mb-3">
          There is no <code className="font-mono">plugins: []</code> array, because there is no config file.
        </p>
        <div className="bg-muted rounded-md p-3 font-mono text-xs overflow-x-auto">
          <pre className="text-error">{`// tailwind.config.js — not read by v4
plugins: [
  require('@tailwindcss/typography'),
  require('@tailwindcss/forms'),
  require('@tailwindcss/container-queries'),
]`}</pre>
        </div>
      </div>

      <div className="bg-card border border-border rounded-lg p-4">
        <h5 className="text-sm font-medium mb-1">And one of them should not be there at all</h5>
        <div className="bg-muted rounded-md p-3 font-mono text-xs overflow-x-auto mt-3">
          <pre className="text-error">{`npm i @tailwindcss/container-queries   # deprecated`}</pre>
        </div>
        <ul className="mt-3 text-xs space-y-2">
          <li className="flex items-start gap-2">
            <span className="mt-1.5 w-1.5 h-1.5 shrink-0 rounded-full bg-error" />
            <span>
              Container queries are <em>core</em> in v4 — <code className="font-mono">@container</code> and{' '}
              <code className="font-mono">@md:</code> already work.
            </span>
          </li>
          <li className="flex items-start gap-2">
            <span className="mt-1.5 w-1.5 h-1.5 shrink-0 rounded-full bg-error" />
            <span>
              Installing it adds a dead dependency that shadows a built-in and tells the next reader this codebase never
              finished its upgrade.
            </span>
          </li>
        </ul>
      </div>

      <p className="text-xs text-error">
        Plugins that v4 never loads, plus one that v4 already absorbed.
      </p>
    </div>
  );
}
```

## Good — do this

`content-official-plugins-good`

```tsx
export function OfficialPluginsGood() {
  return (
    <div className="w-full max-w-md space-y-4">
      <div className="bg-card border border-border rounded-lg p-4">
        <h4 className="font-medium mb-1">Load plugins from CSS with @plugin</h4>
        <p className="text-xs text-muted-foreground mb-3">
          Next to the import at the top of your stylesheet. No config file involved.
        </p>
        <div className="bg-muted rounded-md p-3 font-mono text-xs overflow-x-auto">
          <pre className="text-foreground">{`@import "tailwindcss";

@plugin "@tailwindcss/typography";
@plugin "@tailwindcss/forms";`}</pre>
        </div>
      </div>

      <div className="bg-card border border-border rounded-lg p-4 space-y-4">
        <h5 className="text-sm font-medium">What each one still earns its place for</h5>

        <div className="p-3 bg-muted rounded-lg">
          <p className="text-xs font-medium mb-1">@tailwindcss/typography</p>
          <p className="text-xs text-muted-foreground">
            The <code className="font-mono">prose</code> classes — still the right answer for markdown and CMS output
            whose markup you do not control.
          </p>
        </div>

        <div className="p-3 bg-muted rounded-lg">
          <p className="text-xs font-medium mb-1">@tailwindcss/forms</p>
          <input
            type="text"
            placeholder="Normalized native controls"
            className="w-full mt-1 px-3 py-2 text-sm rounded border border-border bg-background"
          />
        </div>

        <div className="p-3 bg-muted rounded-lg">
          <p className="text-xs font-medium mb-1">Container queries — no plugin</p>
          <div className="font-mono text-xs mt-1">
            <code className="bg-background px-1.5 py-0.5 rounded">@container</code>{' '}
            <code className="bg-background px-1.5 py-0.5 rounded">@md:flex-row</code>
          </div>
          <p className="text-xs text-muted-foreground mt-2">Core since v4. Nothing to install.</p>
        </div>
      </div>

      <p className="text-xs text-success">
        Before adding any plugin to a v4 project, check whether core already does it.
      </p>
    </div>
  );
}
```

## References

- [Tailwind v4: Functions and directives (@plugin)](https://tailwindcss.com/docs/functions-and-directives)
- [Tailwind v4: Typography plugin](https://tailwindcss.com/docs/typography-plugin)
- [Tailwind CSS v4.0 announcement](https://tailwindcss.com/blog/tailwindcss-v4)