Tailwind CSS Plugins — Adding Third-Party and Custom Extensions

npm install -D @tailwindcss/typography

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

<article class="prose prose-lg prose-blue max-w-none mx-auto p-8">
  <h1>Article Title with Typography Plugin</h1>
  <p>The typography plugin styles all HTML elements inside <code>prose</code> automatically. Headings, paragraphs, lists, blockquotes, code blocks, and images are styled consistently.</p>

  <h2>Features</h2>
  <ul>
    <li>Automatic heading styles with proper hierarchy</li>
    <li>Responsive text sizing with prose-sm, prose-base, prose-lg</li>
    <li>Color modifiers: prose-blue, prose-gray, prose-slate</li>
  </ul>

  <blockquote>
    The typography plugin is the best way to style rich text content without writing any CSS.
  </blockquote>

  <p>Code looks like <code>this inline</code> and blocks are styled too.</p>
</article>

npm install -D @tailwindcss/forms

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

<form class="max-w-md mx-auto p-6 space-y-4">
  <div>
    <label class="block text-sm font-medium text-gray-700">Name</label>
    <input type="text" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
  </div>

  <div>
    <label class="block text-sm font-medium text-gray-700">Role</label>
    <select class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
      <option>Developer</option>
      <option>Designer</option>
      <option>Manager</option>
    </select>
  </div>

  <div class="flex items-center gap-2">
    <input type="checkbox" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
    <label class="text-sm text-gray-700">Subscribe to newsletter</label>
  </div>

  <div class="flex items-center gap-2">
    <input type="radio" name="option" class="border-gray-300 text-blue-600 focus:ring-blue-500">
    <label class="text-sm text-gray-700">Option A</label>
  </div>
</form>

// tailwind.config.js
const plugin = require('tailwindcss/plugin');

module.exports = {
  plugins: [
    plugin(function({ addUtilities, theme }) {
      const newUtilities = {
        '.text-shadow-sm': {
          textShadow: '0 1px 2px rgba(0, 0, 0, 0.25)',
        },
        '.text-shadow-md': {
          textShadow: '0 2px 4px rgba(0, 0, 0, 0.25)',
        },
        '.text-shadow-lg': {
          textShadow: '0 4px 8px rgba(0, 0, 0, 0.25)',
        },
        '.text-gradient': {
          background: 'linear-gradient(to right, var(--tw-gradient-stops))',
          '-webkit-background-clip': 'text',
          '-webkit-text-fill-color': 'transparent',
        },
      };
      addUtilities(newUtilities);
    }),
  ],
}

<h1 class="text-4xl font-bold text-shadow-lg">
  Text with shadow plugin
</h1>

<h2 class="text-3xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 text-gradient">
  Gradient text using custom utility
</h2>

// tailwind.config.js
const plugin = require('tailwindcss/plugin');

module.exports = {
  plugins: [
    plugin(function({ addVariant }) {
      // Custom variant for children of a component
      addVariant('child', '& > *');
      addVariant('child-hover', '& > *:hover');

      // Custom variant for print media
      addVariant('print', '@media print');

      // Custom variant for when element is empty
      addVariant('empty', '&:empty');
    }),
  ],
}

<div class="child:px-4 child:py-2 child:hover:bg-gray-100">
  <div>Item 1 (has child:px-4)</div>
  <div>Item 2 (has child:py-2)</div>
  <div>Item 3 (has child:hover:bg-gray-100)</div>
</div>

<div class="print:hidden">
  This is hidden when printing.
</div>

npm install -D @tailwindcss/container-queries

module.exports = {
  plugins: [
    require('@tailwindcss/container-queries'),
  ],
}

<div class="@container max-w-md mx-auto">
  <div class="@sm:grid-cols-2 @lg:grid-cols-3 grid gap-4">
    <div class="bg-blue-100 p-4 rounded">Item 1</div>
    <div class="bg-blue-200 p-4 rounded">Item 2</div>
    <div class="bg-blue-300 p-4 rounded">Item 3</div>
  </div>
</div>