Try It Yourself - SyntaxStudy Editor

HTML / CSS / JS

// 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',
    }),
  ],
};