Community Plugins and Plugin Configuration

Beyond the official plugins, the Tailwind community has produced a rich ecosystem of open-source plugins. Popular ones include tailwindcss-animate (smooth CSS animations), tailwind-scrollbar (cross-browser custom scrollbar styling), tailwindcss-radix (utilities for styling Radix UI primitives), daisyUI (a component library built on top of Tailwind), and tailwind-merge (a JavaScript utility for resolving Tailwind class conflicts at runtime). Many plugins accept configuration options passed as the second argument to the require() call. The @tailwindcss/typography plugin accepts modifiers to customise which elements get styled and how. The @tailwindcss/forms plugin accepts a strategy option. Plugin authors can define configuration through the theme section — allowing users to customise plugin behaviour through the familiar theme.extend mechanism in tailwind.config.js. When building your own plugin for distribution as an npm package, use the plugin.withOptions factory function instead of the plain plugin function. This allows consumers of your plugin to pass configuration options, making the plugin reusable and composable across different projects. The withOptions function receives the user's options and returns the standard plugin handler function, with access to all the same helpers as a non-configurable plugin.

Example

// tailwind.config.js — community plugins with configuration
const plugin = require('tailwindcss/plugin');

module.exports = {
  plugins: [
    // Typography plugin with custom modifiers
    require('@tailwindcss/typography')({
      className: 'prose', // default, can rename to e.g. 'richtext'
    }),

    // Forms plugin using class strategy to avoid global resets
    require('@tailwindcss/forms')({
      strategy: 'class', // use .form-input, .form-select, etc.
    }),

    // Example: a publishable plugin using plugin.withOptions
    plugin.withOptions(
      // Factory receives user options
      function (options = {}) {
        // Returns the standard plugin handler
        return function ({ addUtilities, addComponents, theme }) {
          const prefix = options.prefix ?? 'custom';
          const borderColor = options.borderColor ?? theme('colors.gray.200');

          addComponents({
            [`.${prefix}-card`]: {
              backgroundColor: '#ffffff',
              borderRadius:    theme('borderRadius.xl'),
              border:          `1px solid ${borderColor}`,
              padding:         theme('spacing.6'),
              boxShadow:       theme('boxShadow.sm'),
            },
            [`.${prefix}-card-title`]: {
              fontSize:   theme('fontSize.lg[0]'),
              fontWeight: theme('fontWeight.semibold'),
              color:      theme('colors.gray.900'),
              marginBottom: theme('spacing.2'),
            },
          });
        };
      }
    )({
      // User-supplied options
      prefix: 'my',
      borderColor: '#e5e7eb',
    }),
  ],
};

HTML

Full Editor

Related Resources

Tailwind CSS Reference

Complete tag & property list

Tailwind CSS How-To Guides

Step-by-step practical guides

Tailwind CSS Exercises

Practice what you've learned