tailwind-impl-plugins-official

name	tailwind-impl-plugins-official
description	Use when installing, configuring, or customising any of the four official Tailwind plugins: @tailwindcss/typography (prose classes for rendered Markdown), @tailwindcss/forms (form-input/select/checkbox base reset), @tailwindcss/container-queries (@container variants), @tailwindcss/aspect-ratio (legacy aspect-w-*/aspect-h-* syntax). Prevents the v3-syntax-in-v4 trap (require() arrays do not work in v4, you need @plugin), the missing-plugin trap (forgetting to add container-queries to v3 silently emits zero @-variant classes), the unneeded-plugin-in-v4 trap (installing container-queries or aspect-ratio in v4 wastes bundle size and ships duplicated utilities), the forms-strategy mismatch (strategy base auto-styles every form element globally, strategy class only adds form-* classes), the not-prose escape miss (Markdown rendered inside a button or card inherits prose typography unintentionally), and the typography theme-customisation confusion (v3 uses theme.typography in JS, v4 uses @plugin block syntax). Covers each plugin's complete public surface: prose size modifiers (prose-sm to prose-2xl), color themes (prose-gray, prose-slate, prose-zinc, prose-neutral, prose-stone, prose-invert), element-level modifiers (prose-headings, prose-a, prose-img, prose-code), forms strategies (base vs class), form-input/textarea/select/multiselect/ checkbox/radio classes, container-queries variants (@xs to @7xl, arbitrary @[400px], named containers @container/sidebar), aspect-ratio legacy syntax (aspect-w-16 aspect-h-9), v4 native replacements (aspect-video, aspect-square, aspect-[16/9]), and v3-to-v4 install translation for every plugin. Keywords: tailwindcss typography, tailwindcss forms, tailwindcss container queries, tailwindcss aspect ratio, prose, prose-sm, prose-lg, prose-xl, prose-2xl, prose-invert, prose-gray, prose-slate, prose-zinc, prose-neutral, prose-stone, prose-headings, prose-a, prose-img, prose-code, not-prose, max-w-none, form-input, form-select, form-textarea, form-checkbox, form-radio, form-multiselect, strategy base, strategy class, @container, @sm variant, @md variant, @lg variant, @[400px], named container, container/sidebar, aspect-w, aspect-h, aspect-video, aspect-square, aspect-ratio plugin, @plugin directive, @plugin typography, @plugin forms, require typography, require forms, my prose styles not showing, form input not styled, container query not working, aspect ratio iframe responsive, how do I add markdown styles tailwind, how to style form inputs tailwind, responsive video embed tailwind, install tailwind typography plugin v4, install tailwind forms plugin v4
license	MIT
compatibility	Designed for Claude Code. Requires Tailwind CSS v3.4 or v4.0+.
metadata	{"author":"OpenAEC-Foundation","version":"1.0"}

Tailwind Official Plugins

Four plugins ship from @tailwindlabs :

Plugin	Purpose	v3 status	v4 status
@tailwindcss/typography	prose class for rendered Markdown	Plugin	Plugin
@tailwindcss/forms	Form-element base reset	Plugin	Plugin
@tailwindcss/container-queries	@container + @md: variants	Plugin	BUILT-IN (do not install)
@tailwindcss/aspect-ratio	aspect-w-* / aspect-h-* legacy syntax	Plugin	DEPRECATED (use native aspect-*)

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)

 ;
 ;
 ;