Adding and Configuring Plugins
Enable official Tailwind plugins like @tailwindcss/typography and @tailwindcss/forms and configure them inside tailwind.config.js.
What Tailwind Plugins Do
Tailwind plugins extend the generated CSS by adding new utility classes, component classes, base styles, or variant modifiers. Unlike modifying the config's theme section (which only changes design token values), plugins can add entirely new CSS rules, selectors, and even new class families. Official plugins from the Tailwind team cover common needs like typography and forms, while the community provides hundreds more.
The Official Tailwind Plugin Ecosystem
The Tailwind team maintains four first-party plugins, each solving a specific problem that falls outside the core utility classes. @tailwindcss/typography styles rich HTML content from markdown. @tailwindcss/forms resets browser form styles for easier customization. @tailwindcss/aspect-ratio adds aspect ratio utilities for older browsers. @tailwindcss/container-queries adds container query support as utility classes.
# Install official Tailwind plugins
npm install @tailwindcss/typography
npm install @tailwindcss/forms
npm install @tailwindcss/aspect-ratio
npm install @tailwindcss/container-queriesAll lessons in this course
- Anatomy of tailwind.config.js
- Content Paths and Purging
- Extending vs Overriding the Theme
- Adding and Configuring Plugins