Tailwind Plugin Showcase

Three plugins you'll install in almost every project. Toggle each on/off to see what it actually changes.

prose — beautiful rendered Markdown/MDX

Add the prose class to a container and raw HTML (from Markdown, a CMS, MDX) gets readable typographic defaults — headings, lists, links, quotes, code — with zero per-element classes.

Shipping on Friday

This is body copy that needs readable defaults without hand-styling every tag.

  • Sensible heading sizes
  • List markers & spacing
  • Styled inline code
Good typography is invisible — you just read.
npm i -D @tailwindcss/typography @plugin "@tailwindcss/typography"; /* v4: load in CSS */ <article class="prose dark:prose-invert">{markdown}</article>

forms — sane, resettable form controls

Browser form controls are inconsistent and hard to style. This plugin gives inputs, selects, checkboxes and radios a clean base you can then style with utilities.

npm i -D @tailwindcss/forms @plugin "@tailwindcss/forms"; <input class="rounded-lg border-slate-300 focus:border-indigo-500 focus:ring-indigo-500" />

animate — enter/exit utilities for Radix & shadcn

shadcn components animate with utilities like animate-in, fade-in, zoom-in-95, slide-in-from-bottom. Click to replay each.

Dialog
npm i -D tw-animate-css @import "tw-animate-css"; <div class="animate-in fade-in zoom-in-95 slide-in-from-bottom-2 duration-200">…</div>