tailwindcss-plugins

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

<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>

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

<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>

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

<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>

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

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

npm install -D @tailwindcss/forms

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

<!-- 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>

@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">

<!-- 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">

npm install -D @tailwindcss/container-queries

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

<!-- 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>

<!-- 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>

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

/* 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;
}

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

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

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

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

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>

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

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

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

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