Tailwind Impl Plugins Official

Tailwind Official Plugins

Four plugins ship from @tailwindlabs :

ALWAYS check the version row before installing. Two of the four are the wrong choice for new v4 code.

Companion skills :

• tailwind-impl-config-v3 : where to register plugins in JS config
• tailwind-impl-config-v4 : @plugin directive in CSS-first config
• tailwind-impl-build-postcss-cli : framework-agnostic install paths
• tailwind-syntax-modern-utilities : native aspect-ratio + container-query utilities in v4

Quick Reference : Install Translation

v3 (JS config)

// tailwind.config.js
module.exports = {
  plugins: [
    require("@tailwindcss/typography"),
    require("@tailwindcss/forms"),
    require("@tailwindcss/container-queries"),
    require("@tailwindcss/aspect-ratio"),   // legacy use only
  ],
};

v4 (CSS-first)

/* app.css */
@import "tailwindcss";
@plugin "@tailwindcss/typography";
@plugin "@tailwindcss/forms";
/* NO container-queries (built-in)   */
/* NO aspect-ratio (use native aspect-*) */

Install all common plugins

npm install -D @tailwindcss/typography @tailwindcss/forms

For v3 also :

npm install -D @tailwindcss/container-queries
# only install aspect-ratio if you need legacy syntax for Safari < 14.1

Decision Tree : Which Plugin Do I Need

Rendering Markdown / CMS content with default-styled HTML ?
  -> @tailwindcss/typography (prose)

Styling form inputs, selects, checkboxes ?
  -> @tailwindcss/forms

Need element-size-relative responsive styling ?
  ├── v3 -> @tailwindcss/container-queries
  └── v4 -> Built-in, NO plugin needed

Need aspect-ratio constraint on a container with child ?
  ├── v3 modern -> Native aspect-* utilities (no plugin)
  ├── v3 legacy + Safari < 14.1 fallback -> @tailwindcss/aspect-ratio
  └── v4 -> Native aspect-* utilities ONLY

Plugin 1 : @tailwindcss/typography (prose)

Purpose

Adds the prose class. Apply to a wrapper element and every nested HTML element (h1, p, ul, code, pre, blockquote, img, etc.) gets sensible default typography. Designed for rendered Markdown or CMS-output where you cannot put utility classes on individual elements.

Minimum usage

<article class="prose">
  <h1>Hello</h1>
  <p>Markdown-rendered paragraph.</p>
</article>

Size modifiers

Color theme modifiers

prose-gray (default), prose-slate, prose-zinc, prose-neutral, prose-stone. Switch per page or per section :

<article class="prose prose-slate">

Dark mode

<article class="prose dark:prose-invert">

Element-level modifiers

Override one element's style without leaving the prose system :

<article class="prose prose-headings:text-blue-900 prose-a:text-emerald-600 prose-img:rounded-xl prose-code:bg-zinc-100">

Supported : prose-headings, prose-h1, prose-h2, prose-h3, prose-h4, prose-p, prose-a, prose-strong, prose-em, prose-ul, prose-ol, prose-li, prose-code, prose-pre, prose-blockquote, prose-img, prose-figure, prose-figcaption, prose-hr, prose-table, prose-th, prose-td, prose-kbd, prose-lead.

Escape via not-prose

A descendant that should NOT inherit typography :

<article class="prose">
  <p>Markdown text</p>
  <div class="not-prose">
    <!-- Manually-styled UI block, prose styles do not apply here -->
    <button class="px-3 py-1 bg-blue-500 text-white">Action</button>
  </div>
</article>

Width control

Prose ships a 65-character max-width. Override with max-w-none :

<article class="prose max-w-none">

Customising typography (v3)

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      typography: {
        DEFAULT: {
          css: {
            color: "#333",
            a: { color: "#3182ce", "&:hover": { color: "#2c5aa0" } },
            h1: { fontWeight: "800" },
          },
        },
      },
    },
  },
  plugins: [require("@tailwindcss/typography")],
};

Customising typography (v4)

Customisation is done via CSS variables in @theme :

@import "tailwindcss";
@plugin "@tailwindcss/typography";

@theme {
  --color-prose-body: #333;
  --color-prose-headings: #111;
  --color-prose-links: #3182ce;
}

Full variable list in references/methods.md.

Plugin 2 : @tailwindcss/forms

Purpose

Normalises form-element styling across browsers so Tailwind utilities can style them without each consumer needing appearance: none and extensive resets.

Two strategies

strategy: "base"  -> Resets EVERY form element globally.
                     No class required.
                     Adds: type=text, textarea, select, checkbox, radio.

strategy: "class" -> Only adds form-* classes.
                     Must apply form-input, form-select, etc. explicitly.

Default in v3 + v4 : base.

v3 strategy config

// tailwind.config.js
module.exports = {
  plugins: [
    require("@tailwindcss/forms")({ strategy: "class" }),
  ],
};

v4 strategy config

@plugin "@tailwindcss/forms" {
  strategy: "class";
}

Form classes (when strategy is "class")

<input type="text" class="form-input">
<input type="email" class="form-input">
<input type="password" class="form-input">
<textarea class="form-textarea"></textarea>
<select class="form-select"><option>One</option></select>
<select multiple class="form-multiselect"></select>
<input type="checkbox" class="form-checkbox">
<input type="radio" class="form-radio">

Strategy decision

Plugin 3 : @tailwindcss/container-queries (v3 ONLY)

Purpose

Adds the @container class to mark an element as a container, plus variants @sm:, @md:, @lg:, etc. to style based on the container's size instead of the viewport.

CRITICAL : v4 does NOT need this plugin

In v4 container queries are part of the framework. Installing this plugin in a v4 project DOES NOTHING USEFUL and adds bundle weight.

/* v4 entry CSS */
@import "tailwindcss";
/* DO NOT add @plugin "@tailwindcss/container-queries"; */

v3 install

// tailwind.config.js
module.exports = {
  plugins: [require("@tailwindcss/container-queries")],
};

Basic usage

<div class="@container">
  <div class="@lg:underline">Underlined when container >= 32rem</div>
</div>

Variant scale

@xs 20rem, @sm 24rem, @md 28rem, @lg 32rem, @xl 36rem, @2xl 42rem, @3xl 48rem, @4xl 56rem, @5xl 64rem, @6xl 72rem, @7xl 80rem.

Arbitrary container sizes

<div class="@container">
  <div class="@[400px]:bg-blue-500">Blue when container >= 400px</div>
</div>

Named containers

<div class="@container/sidebar">
  <main class="@container/main">
    <div class="@lg/sidebar:hidden @md/main:flex">
      <!-- Hidden when 'sidebar' container >= 32rem ;
           Flex when 'main' container >= 28rem -->
    </div>
  </main>
</div>

Plugin 4 : @tailwindcss/aspect-ratio (DEPRECATED in v4)

Purpose (legacy)

Pre-v3.0, the only way to set an aspect ratio on a child element (typically an iframe or video embed) was the padding-bottom hack. This plugin provided aspect-w-* and aspect-h-* to wrap that hack.

v3 status

Tailwind v3.0 added native aspect-ratio utilities (aspect-video, aspect-square, aspect-[16/9]). The plugin is INSTALLED ONLY when you need Safari < 14.1 fallback support, which uses the padding-bottom technique.

v4 status

DEPRECATED. Native CSS aspect-ratio is universally supported (Safari 15+, Chrome 88+, Firefox 89+) and v4 targets only modern browsers. NEVER install this plugin in a v4 project.

v3 install (legacy syntax only)

// tailwind.config.js
module.exports = {
  corePlugins: { aspectRatio: false },   // disable native to avoid conflict
  plugins: [require("@tailwindcss/aspect-ratio")],
};

v3 legacy usage

<div class="aspect-w-16 aspect-h-9">
  <iframe src="https://..."></iframe>
</div>

Modern replacement (any version)

<iframe class="aspect-video w-full" src="https://..."></iframe>
<img class="aspect-square w-32" src="..." />
<div class="aspect-[16/9] w-full bg-zinc-100"></div>

Single class. No wrapper required. No corePlugins toggle.

Quick Reference : Migration Table v3 -> v4

What This Skill Does NOT Cover

• Third-party community plugins (e.g. tailwindcss-animate, @kobalte/tailwindcss) : see tailwind-impl-plugins-community.
• Writing your own custom plugin (addUtilities, matchUtilities, theme() callback) : see tailwind-impl-plugins-custom.
• Native v4 container-query or aspect-ratio utility behaviour : see tailwind-syntax-modern-utilities.
• Forms-styling without the plugin (manual appearance-none resets) : see tailwind-impl-forms-styling.

References

• references/methods.md : Every public API for each plugin (full signatures, theme variables, config options).
• references/examples.md : Realistic patterns : Markdown blog, contact form, dashboard with container queries, responsive iframe.
• references/anti-patterns.md : v3-syntax-in-v4 traps, forgotten not-prose escapes, container-queries in v4, strategy mismatches.

Official Source Links

• Typography : https://github.com/tailwindlabs/tailwindcss-typography
• Forms : https://github.com/tailwindlabs/tailwindcss-forms
• Container Queries : https://github.com/tailwindlabs/tailwindcss-container-queries
• Aspect Ratio : https://github.com/tailwindlabs/tailwindcss-aspect-ratio
• v4 Typography docs : https://tailwindcss.com/docs/typography-plugin