add-plugin

Add TailwindCSS Plugin

This command helps you add, configure, and optimize TailwindCSS plugins to extend functionality and enhance your design system.

What This Command Does

1. Plugin Installation

   • Installs official and community TailwindCSS plugins
   • Configures plugin settings for optimal performance
   • Integrates plugins with existing configuration
   • Updates content paths for plugin-specific classes

2. Configuration Setup

   • Configures plugin options and customizations
   • Sets up plugin-specific utility classes
   • Optimizes for CSS bundle size and purging
   • Integrates with design system tokens

3. Usage Examples

   • Provides implementation examples for each plugin
   • Shows best practices and common patterns
   • Demonstrates responsive and interactive usage
   • Includes accessibility considerations

4. Performance Optimization

   • Configures plugins for optimal bundle size
   • Sets up effective purging strategies
   • Optimizes for build performance
   • Monitors plugin impact on CSS output

Official Plugins

Typography Plugin (@tailwindcss/typography)

Installation and Setup

# Install typography plugin
npm install -D @tailwindcss/typography

# Or with yarn
yarn add -D @tailwindcss/typography

Configuration

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      typography: ({ theme }) => ({
        // Default prose styles
        DEFAULT: {
          css: {
            maxWidth: 'none',
            color: theme('colors.gray.700'),
            '[class~="lead"]': {
              color: theme('colors.gray.600'),
              fontSize: theme('fontSize.xl')[0],
              lineHeight: theme('fontSize.xl')[1].lineHeight,
            },
            a: {
              color: theme('colors.blue.600'),
              textDecoration: 'none',
              fontWeight: theme('fontWeight.medium'),
              '&:hover': {
                color: theme('colors.blue.700'),
                textDecoration: 'underline',
              },
            },
            'h1, h2, h3, h4, h5, h6': {
              color: theme('colors.gray.900'),
              fontWeight: theme('fontWeight.bold'),
            },
            h1: {
              fontSize: theme('fontSize.4xl')[0],
              lineHeight: theme('fontSize.4xl')[1].lineHeight,
            },
            h2: {
              fontSize: theme('fontSize.3xl')[0],
              lineHeight: theme('fontSize.3xl')[1].lineHeight,
            },
            h3: {
              fontSize: theme('fontSize.2xl')[0],
              lineHeight: theme('fontSize.2xl')[1].lineHeight,
            },
            code: {
              color: theme('colors.gray.900'),
              backgroundColor: theme('colors.gray.100'),
              padding: theme('spacing.1'),
              borderRadius: theme('borderRadius.sm'),
              fontSize: theme('fontSize.sm')[0],
            },
            'pre code': {
              backgroundColor: 'transparent',
              padding: 0,
            },
            pre: {
              backgroundColor: theme('colors.gray.900'),
              color: theme('colors.gray.100'),
              padding: theme('spacing.4'),
              borderRadius: theme('borderRadius.lg'),
              overflow: 'auto',
            },
            blockquote: {
              borderLeftWidth: theme('borderWidth.4'),
              borderLeftColor: theme('colors.gray.300'),
              paddingLeft: theme('spacing.4'),
              fontStyle: 'italic',
              color: theme('colors.gray.600'),
            },
          },
        },
        
        // Dark mode typography
        invert: {
          css: {
            '--tw-prose-body': theme('colors.gray.300'),
            '--tw-prose-headings': theme('colors.gray.100'),
            '--tw-prose-lead': theme('colors.gray.400'),
            '--tw-prose-links': theme('colors.blue.400'),
            '--tw-prose-bold': theme('colors.gray.100'),
            '--tw-prose-counters': theme('colors.gray.400'),
            '--tw-prose-bullets': theme('colors.gray.500'),
            '--tw-prose-hr': theme('colors.gray.700'),
            '--tw-prose-quotes': theme('colors.gray.200'),
            '--tw-prose-quote-borders': theme('colors.gray.700'),
            '--tw-prose-captions': theme('colors.gray.400'),
            '--tw-prose-code': theme('colors.gray.100'),
            '--tw-prose-pre-code': theme('colors.gray.100'),
            '--tw-prose-pre-bg': theme('colors.gray.800'),
            '--tw-prose-th-borders': theme('colors.gray.600'),
            '--tw-prose-td-borders': theme('colors.gray.700'),
          },
        },
        
        // Size variants
        sm: {
          css: {
            fontSize: theme('fontSize.sm')[0],
            lineHeight: theme('fontSize.sm')[1].lineHeight,
            h1: { fontSize: theme('fontSize.2xl')[0] },
            h2: { fontSize: theme('fontSize.xl')[0] },
            h3: { fontSize: theme('fontSize.lg')[0] },
          },
        },
        
        lg: {
          css: {
            fontSize: theme('fontSize.lg')[0],
            lineHeight: theme('fontSize.lg')[1].lineHeight,
            h1: { fontSize: theme('fontSize.5xl')[0] },
            h2: { fontSize: theme('fontSize.4xl')[0] },
            h3: { fontSize: theme('fontSize.3xl')[0] },
          },
        },
        
        xl: {
          css: {
            fontSize: theme('fontSize.xl')[0],
            lineHeight: theme('fontSize.xl')[1].lineHeight,
            h1: { fontSize: theme('fontSize.6xl')[0] },
            h2: { fontSize: theme('fontSize.5xl')[0] },
            h3: { fontSize: theme('fontSize.4xl')[0] },
          },
        },
      }),
    },
  },
  plugins: [
    require('@tailwindcss/typography'),
  ],
}