Plugins & Customization

Official Plugins

Tailwind ships plugins for common patterns: @tailwindcss/typography (prose classes), @tailwindcss/forms (form element resets), @tailwindcss/container-queries, and @tailwindcss/aspect-ratio.

Install and add to the plugins array in config. Typography plugin adds prose class for beautiful default styling of markdown and CMS content.

• prose-invert flips typography colors for dark mode
• forms plugin normalizes input, select, and checkbox styling
• v4 integrates many plugins as built-in features

npm install @tailwindcss/typography @tailwindcss/forms

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

<article class="prose dark:prose-invert lg:prose-xl">
  {markdownContent}
</article>

Theme Customization

Extend the default theme rather than overriding it. theme.extend adds to defaults; theme (without extend) replaces them entirely. Customize colors, spacing, fonts, breakpoints, animations, and more.

Define design tokens in the theme so the entire team uses consistent values. Custom colors appear as utilities automatically: bg-brand, text-brand, border-brand.

theme: {
  extend: {
    colors: {
      brand: { 50: '#eff6ff', 500: '#2563eb', 900: '#1e3a8a' },
    },
    spacing: { '18': '4.5rem', '88': '22rem' },
    animation: { 'fade-in': 'fadeIn 0.5s ease-out' },
    keyframes: {
      fadeIn: { from: { opacity: '0' }, to: { opacity: '1' } },
    },
  },
}

Custom Utilities

Add project-specific utilities with the plugin API or @utility directive (v4). Custom utilities appear alongside built-in ones with full variant support (hover:, dark:, md:).

Use addUtilities for static utilities and matchUtilities for dynamic utilities that accept values, like tailwind built-in spacing.

// tailwind.config.js plugin
function({ addUtilities }) {
  addUtilities({
    '.text-balance': { 'text-wrap': 'balance' },
    '.scrollbar-hide': {
      '-ms-overflow-style': 'none',
      'scrollbar-width': 'none',
    },
  });
}

Writing Custom Plugins

Plugins are functions that receive helpers: addUtilities, addComponents, addBase, theme, and config. Publish reusable plugins as npm packages or keep them in a local plugins/ directory.

Structure plugins to accept options: plugin.withOptions((opts) => ({ addUtilities }) => { ... }). This enables consumer configuration.

// plugins/button-plugin.js
const plugin = require('tailwindcss/plugin');

module.exports = plugin(function({ addComponents, theme }) {
  addComponents({
    '.btn': {
      padding: `${theme('spacing.2')} ${theme('spacing.4')}`,
      borderRadius: theme('borderRadius.lg'),
      fontWeight: theme('fontWeight.semibold'),
    },
  });
});

Presets and Sharing Config

Extract shared configuration into a preset package for monorepos or organization-wide design systems. Presets merge with project config — projects override or extend the shared tokens.

Presets can include theme values, plugins, and content paths. This ensures brand consistency across multiple applications.

// @org/tailwind-preset/index.js
module.exports = {
  theme: { extend: { colors: { brand: '#2563eb' } } },
  plugins: [require('@tailwindcss/typography')],
};

// Project tailwind.config.js
module.exports = {
  presets: [require('@org/tailwind-preset')],
  content: ['./src/**/*.{js,ts,jsx,tsx}'],
};