Adicionando variações personalizadas por meio de um plugin

What Are Tailwind Variants?

The addVariant Helper

const plugin = require('tailwindcss/plugin');

plugin(function({ addVariant }) {
  // 'hocus' = hover OR focus (useful for touch/keyboard parity)
  addVariant('hocus', ['&:hover', '&:focus']);

  // Usage in markup:
  // <button class='hocus:bg-blue-100 hocus:text-blue-700'>
  //   This button highlights on both hover and focus
  // </button>
})

Data Attribute Variants

plugin(function({ addVariant }) {
  // Target elements with data-active='true'
  addVariant('data-active', '&[data-active='true']');

  // Target elements with data-state='open'
  addVariant('open', '&[data-state='open']');

  // Target disabled attribute (not just :disabled pseudo-class)
  addVariant('ui-disabled', '&[aria-disabled='true']');
})

// Usage:
// <div data-state='open' class='open:bg-blue-50 open:border-blue-200'>
// <button aria-disabled='true' class='ui-disabled:opacity-50 ui-disabled:cursor-not-allowed'>

Parent State Variants

plugin(function({ addVariant }) {
  // Apply when an ancestor has .is-dragging class
  addVariant('dragging', '.is-dragging &');

  // Apply when the form has [data-submitting] attribute
  addVariant('submitting', '[data-submitting] &');

  // Apply when the theme container is in .dark mode
  addVariant('dark-mode', '.dark &');
})

// Usage:
// <form data-submitting>
//   <input class='submitting:opacity-50 submitting:cursor-wait' />
//   <button class='submitting:bg-gray-400 submitting:pointer-events-none'>
//     Submit
//   </button>
// </form>

nth-Child and nth-of-Type Variants

plugin(function({ addVariant }) {
  // First 3 items
  addVariant('first-3', '&:nth-child(-n+3)');

  // Every 3rd item
  addVariant('third', '&:nth-child(3n)');

  // Only child
  addVariant('only', '&:only-child');

  // Not the first child
  addVariant('not-first', '&:not(:first-child)');

  // Not the last child
  addVariant('not-last', '&:not(:last-child)');
})

// Usage:
// <ul>
//   <li class='first-3:font-bold not-last:border-b'>Item 1</li>
//   <li class='first-3:font-bold not-last:border-b'>Item 2</li>
//   <li class='first-3:font-bold not-last:border-b'>Item 3</li>
// </ul>

Combination Variants

plugin(function({ addVariant }) {
  // 'selected' applies on aria-selected OR aria-current
  addVariant('selected', [
    '&[aria-selected='true']',
    '&[aria-current='true']',
    '&[aria-current='page']'
  ]);

  // 'expanded' applies on open disclosure or expanded accordion
  addVariant('expanded', [
    '&[aria-expanded='true']',
    '&[data-state='open']'
  ]);
})

// Usage:
// <a class='selected:bg-blue-50 selected:text-blue-700 expanded:rotate-180'>

Pseudo-Element Variants

plugin(function({ addVariant }) {
  // ::after pseudo-element variant
  addVariant('after', '&::after');

  // ::before pseudo-element variant
  addVariant('before', '&::before');

  // ::selection (text selection styling)
  addVariant('selection', '&::selection');
})

// Usage (combine with content utility for decorative elements):
// <div class="
//   relative
//   after:content-[''] after:absolute after:inset-0
//   after:bg-gradient-to-t after:from-black/50 after:to-transparent
//   after:rounded-xl after:pointer-events-none
// ">

Media Query Variants

plugin(function({ addVariant }) {
  // Prefers reduced motion variant
  addVariant('motion-reduce', '@media (prefers-reduced-motion: reduce)');

  // High contrast mode
  addVariant('contrast-high', '@media (prefers-contrast: high)');

  // Print media
  addVariant('print', '@media print');

  // Pointer: coarse (touch devices)
  addVariant('touch', '@media (pointer: coarse)');
})

// Usage:
// <div class='motion-reduce:transition-none motion-reduce:animate-none'>
// <button class='touch:py-4 touch:text-lg'>Larger on touch</button>

ARIA Attribute Variants for Accessibility

plugin(function({ addVariant }) {
  // Custom ARIA variants for component states
  addVariant('aria-expanded-true', '&[aria-expanded='true']');
  addVariant('aria-pressed', '&[aria-pressed='true']');
  addVariant('aria-busy', '&[aria-busy='true']');
  addVariant('aria-invalid', '&[aria-invalid='true']');
  addVariant('aria-required', '&[aria-required='true']');
})

// Usage:
// <button aria-pressed='true'
//   class='aria-pressed:bg-blue-600 aria-pressed:text-white
//          aria-busy:opacity-60 aria-busy:cursor-wait'>
//   Toggle
// </button>

Combining addVariant With addUtilities

// A complete 'list-nav' plugin
plugin(function({ addVariant, addComponents }) {
  // Variant: item is the currently active page
  addVariant('nav-active', '&[data-nav-active='true']');

  // Component: base nav item style
  addComponents({
    '.nav-item': {
      display: 'flex',
      alignItems: 'center',
      gap: '0.5rem',
      padding: '0.5rem 0.75rem',
      borderRadius: '0.5rem',
      fontSize: '0.875rem',
      fontWeight: '500',
      color: '#4b5563',
      cursor: 'pointer',
      transition: 'background-color 150ms, color 150ms',
      '&:hover': { backgroundColor: '#f3f4f6' }
    }
  });
})
// Usage:
// <a class='nav-item nav-active:bg-blue-50 nav-active:text-blue-700'>

Testing Custom Variants

<!-- test.html -->
<div data-active='true'
  class='data-active:bg-blue-50 data-active:border-blue-200
         hover:data-active:bg-blue-100
         md:data-active:bg-blue-200'>
  Content
</div>

<button aria-pressed='true'
  class='aria-pressed:bg-blue-600 aria-pressed:text-white'>
  Toggle
</button>

<!-- Expected generated CSS: -->
/* .data-active\:bg-blue-50[data-active='true'] { background-color: #eff6ff } */
/* @media (min-width: 768px) { .md\:data-active\:bg-blue-200[data-active='true'] { ... } } */

Quick Check

Lesson Recap