Plugins

Tailwind plugins extend the framework with additional utilities, components, and pre-built functionality. You can use community plugins or write your own to add exactly what your project needs.

Adding a plugin

Install a community plugin and add it to your config.

npm install @tailwindcss/forms
    

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

The forms plugin gives you beautiful default styles for all form elements — inputs, selects, textareas, checkboxes, and radios.

Popular plugins

• @tailwindcss/forms — Beautiful form element styles
• @tailwindcss/typography — Prose styling for long-form content
• @tailwindcss/aspect-ratio — Aspect ratio utilities
• @tailwindcss/container-queries — Container query support
• tailwindcss-animate — Animation utilities

The typography plugin

The typography plugin adds a prose class that styles HTML content beautifully. It's perfect for blog posts, documentation, and any long-form text.

<article class="prose prose-lg max-w-none">
  <h1>My Blog Post</h1>
  <p>This paragraph is automatically styled with proper
  typography, line heights, and spacing.</p>
  <ul>
    <li>Lists look great</li>
    <li>Without any custom CSS</li>
  </ul>
</article>
    

Writing a custom plugin

You can write your own plugins to add utilities or components.

// tailwind.config.js
module.exports = {
  plugins: [
    function({ addUtilities }) {
      addUtilities({
        '.scrollbar-hide': {
          '-ms-overflow-style': 'none',
          'scrollbar-width': 'none',
          '&::-webkit-scrollbar': {
            display: 'none',
          },
        },
      })
    },
  ],
}
    

This adds a scrollbar-hide utility that hides scrollbars across all browsers.