JosiahSiegel/tailwindcss-plugins

Tailwind CSS Plugins

Official Plugins

@tailwindcss/typography

Beautiful typographic defaults for content you don't control (Markdown, CMS content).

Installation

npm install -D @tailwindcss/typography

@import "tailwindcss";
@plugin "@tailwindcss/typography";

Basic Usage

<article class="prose">
  <h1>Article Title</h1>
  <p>This content gets beautiful default styles...</p>
</article>

Size Modifiers

| Class | Description | |-------|-------------| | prose-sm | Smaller text (14px base) | | prose | Default (16px base) | | prose-lg | Larger text (18px base) | | prose-xl | Extra large (20px base) | | prose-2xl | Huge (24px base) |

<article class="prose md:prose-lg lg:prose-xl">
  <!-- Responsive sizing -->
</article>

Color Themes

<article class="prose prose-slate">Gray theme</article>
<article class="prose prose-zinc">Zinc theme</article>
<article class="prose prose-neutral">Neutral theme</article>
<article class="prose prose-stone">Stone theme</article>

Dark Mode

<article class="prose dark:prose-invert">
  <!-- Automatically inverts for dark mode -->
</article>

Element Modifiers

Override specific elements:

<article class="
  prose
  prose-headings:text-blue-600
  prose-a:text-blue-500
  prose-a:no-underline
  prose-code:text-pink-500
  prose-img:rounded-lg
  prose-strong:text-gray-900
  prose-blockquote:border-blue-500
">
  Content
</article>

Max Width Control

<!-- Remove max-width constraint -->
<article class="prose max-w-none">
  Full width content
</article>

Escaping Prose Styles

<article class="prose">
  <h1>Styled heading</h1>
  <p>Styled paragraph</p>

  <div class="not-prose">
    <!-- This div and its children escape prose styles -->
    <CustomComponent />
  </div>

  <p>Back to prose styles</p>
</article>

Custom Class Name

@plugin "@tailwindcss/typography" {
  className: wysiwyg;
}

<article class="wysiwyg">Content</article>

@tailwindcss/forms

Resets form elements to a consistent, easily-styleable baseline.

Installation

npm install -D @tailwindcss/forms

@import "tailwindcss";
@plugin "@tailwindcss/forms";

Styled Elements

The plugin applies styles to:

• input[type='text']
• input[type='email']
• input[type='password']
• input[type='number']
• input[type='url']
• input[type='date']
• input[type='datetime-local']
• input[type='month']
• input[type='week']
• input[type='time']
• input[type='search']
• input[type='tel']
• input[type='checkbox']
• input[type='radio']
• select
• select[multiple]
• textarea

Basic Usage

<!-- Text input -->
<input type="email" class="rounded-lg border-gray-300 focus:border-blue-500 focus:ring-blue-500">

<!-- Select -->
<select class="rounded-lg border-gray-300">
  <option>Option 1</option>
  <option>Option 2</option>
</select>

<!-- Checkbox -->
<input type="checkbox" class="rounded text-blue-500 focus:ring-blue-500">

<!-- Radio -->
<input type="radio" class="text-blue-500 focus:ring-blue-500">

<!-- Textarea -->
<textarea class="rounded-lg border-gray-300" rows="4"></textarea>

Strategy: Class-Based

For opt-in styling (doesn't apply global resets):

@plugin "@tailwindcss/forms" {
  strategy: class;
}

<!-- Explicitly opt-in to form styles -->
<input type="text" class="form-input rounded-lg">
<select class="form-select rounded-lg">
<textarea class="form-textarea rounded-lg">
<input type="checkbox" class="form-checkbox rounded">
<input type="radio" class="form-radio">

Form Classes Reference

| Class | Element | |-------|---------| | form-input | Text inputs | | form-textarea | Textareas | | form-select | Selects | | form-multiselect | Multiple selects | | form-checkbox | Checkboxes | | form-radio | Radio buttons |

Styling Checkboxes/Radios

<!-- Colored checkbox -->
<input type="checkbox" class="rounded text-pink-500">

<!-- Accent color (native) -->
<input type="checkbox" class="accent-purple-600">

<!-- Custom size -->
<input type="checkbox" class="h-6 w-6 rounded text-blue-500">

@tailwindcss/container-queries

Style elements based on their container's size instead of the viewport.

Installation

npm install -D @tailwindcss/container-queries

@import "tailwindcss";
@plugin "@tailwindcss/container-queries";

Basic Usage

<!-- Define a container -->
<div class="@container">
  <!-- Use container query breakpoints -->
  <div class="flex flex-col @md:flex-row @lg:gap-8">
    <div class="@sm:text-lg @md:text-xl">
      Responsive to container, not viewport
    </div>
  </div>
</div>

Container Breakpoints

| Prefix | Width | |--------|-------| | @xs | 320px | | @sm | 384px | | @md | 448px | | @lg | 512px | | @xl | 576px | | @2xl | 672px | | @3xl | 768px | | @4xl | 896px | | @5xl | 1024px | | @6xl | 1152px | | @7xl | 1280px |

Named Containers

<!-- Name the container -->
<div class="@container/sidebar">
  <!-- Reference by name -->
  <div class="@md/sidebar:flex">
    Only flex when sidebar container is md
  </div>
</div>

<div class="@container/main">
  <div class="@lg/main:grid-cols-3">
    Grid when main container is lg
  </div>
</div>

Arbitrary Container Values

<div class="@container">
  <div class="@[400px]:flex @[600px]:grid">
    Arbitrary breakpoint values
  </div>
</div>

Creating Custom Plugins (v4)

CSS-Only Utilities

For simple utilities, use the @utility directive instead of a JavaScript plugin:

/* In your CSS file */
@utility content-auto {
  content-visibility: auto;
}

@utility text-balance {
  text-wrap: balance;
}

@utility scrollbar-none {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

@utility scrollbar-none::-webkit-scrollbar {
  display: none;
}

JavaScript Plugins

For complex plugins requiring JavaScript:

// plugins/my-plugin.js
import plugin from 'tailwindcss/plugin'

export default plugin(function({ addUtilities, addComponents, matchUtilities, theme }) {
  // Add static utilities
  addUtilities({
    '.content-auto': {
      'content-visibility': 'auto',
    },
    '.text-balance': {
      'text-wrap': 'balance',
    },
  })

  // Add components
  addComponents({
    '.btn': {
      padding: theme('spacing.2') + ' ' + theme('spacing.4'),
      borderRadius: theme('borderRadius.lg'),
      fontWeight: theme('fontWeight.medium'),
    },
    '.btn-primary': {
      backgroundColor: theme('colors.blue.500'),
      color: theme('colors.white'),
      '&:hover': {
        backgroundColor: theme('colors.blue.600'),
      },
    },
  })

  // Add dynamic utilities
  matchUtilities(
    {
      'text-shadow': (value) => ({
        textShadow: value,
      }),
    },
    { values: theme('textShadow') }
  )
})

Load in CSS:

@import "tailwindcss";
@plugin "./plugins/my-plugin.js";

Plugin with Theme Extension

// plugins/gradients.js
import plugin from 'tailwindcss/plugin'

export default plugin(
  function({ matchUtilities, theme }) {
    matchUtilities(
      {
        'text-gradient': (value) => ({
          backgroundImage: value,
          backgroundClip: 'text',
          color: 'transparent',
        }),
      },
      { values: theme('textGradient') }
    )
  },
  {
    theme: {
      textGradient: {
        primary: 'linear-gradient(to right, #667eea, #764ba2)',
        secondary: 'linear-gradient(to right, #f093fb, #f5576c)',
        sunset: 'linear-gradient(to right, #fa709a, #fee140)',
      },
    },
  }
)

Adding Custom Variants

// plugins/variants.js
import plugin from 'tailwindcss/plugin'

export default plugin(function({ addVariant }) {
  // Peer states
  addVariant('peer-checked', ':merge(.peer):checked ~ &')

  // Group states
  addVariant('group-focus-visible', ':merge(.group):focus-visible &')

  // Data attributes
  addVariant('data-active', '&[data-active="true"]')
  addVariant('data-loading', '&[data-loading]')

  // Custom selectors
  addVariant('hocus', ['&:hover', '&:focus'])
  addVariant('not-first', '&:not(:first-child)')
  addVariant('not-last', '&:not(:last-child)')
})

Community Plugins

Popular Plugins

| Plugin | Description | |--------|-------------| | tailwindcss-animate | Animation utilities | | tailwindcss-motion | Advanced motion/animation | | @headlessui/tailwindcss | Headless UI variants | | tailwind-scrollbar | Scrollbar styling | | tailwindcss-3d | 3D transform utilities | | tailwindcss-fluid-type | Fluid typography |

tailwindcss-animate

npm install -D tailwindcss-animate

@plugin "tailwindcss-animate";

<div class="animate-in fade-in slide-in-from-bottom-4 duration-500">
  Animated content
</div>

<div class="animate-out fade-out slide-out-to-top-4 duration-300">
  Exiting content
</div>

Best Practices

1. Load Only What You Need

/* Only load plugins you actually use */
@plugin "@tailwindcss/typography";
/* @plugin "@tailwindcss/forms"; -- commented out if not using */

2. Use CSS Utilities First

Before creating a JavaScript plugin, try the @utility directive:

/* Simple custom utility - no JS needed */
@utility glass {
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.1);
}

3. Document Custom Plugins

/**
 * @name Text Gradient Plugin
 * @description Adds text gradient utilities
 * @usage class="text-gradient-primary"
 */
export default plugin(...)

4. Test Plugin Compatibility

When upgrading Tailwind, verify all plugins work with the new version:

npm outdated | grep tailwind
npm update @tailwindcss/typography @tailwindcss/forms