Plugin के ज़रिए कस्टम यूटिलिटी जोड़ना

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

module.exports = {
  plugins: [
    plugin(function({ addUtilities }) {
      addUtilities({
        '.scrollbar-hide': {
          '-ms-overflow-style': 'none',
          'scrollbar-width': 'none',
          '&::-webkit-scrollbar': {
            display: 'none'
          }
        },
        '.scrollbar-default': {
          '-ms-overflow-style': 'auto',
          'scrollbar-width': 'auto',
          '&::-webkit-scrollbar': {
            display: 'block'
          }
        }
      });
    })
  ]
};

// Usage
// <div class='overflow-x-auto scrollbar-hide'>...

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

module.exports = {
  theme: {
    extend: {
      textShadow: {
        sm: '0 1px 2px var(--tw-shadow-color, rgba(0,0,0,0.2))',
        DEFAULT: '0 2px 4px var(--tw-shadow-color, rgba(0,0,0,0.3))',
        lg: '0 4px 8px var(--tw-shadow-color, rgba(0,0,0,0.4))'
      }
    }
  },
  plugins: [
    plugin(function({ matchUtilities, theme }) {
      matchUtilities(
        { 'text-shadow': (value) => ({ textShadow: value }) },
        { values: theme('textShadow') }
      );
    })
  ]
};
// Usage: text-shadow-sm, text-shadow, text-shadow-lg
// Or arbitrary: text-shadow-[0_4px_6px_rgba(0,0,0,0.5)]

plugin(function({ addUtilities, theme }) {
  const spacing = theme('spacing');
  const utilities = {};

  Object.entries(spacing).forEach(([key, value]) => {
    // Logical margin utilities (RTL-aware)
    utilities['.ms-' + key] = { 'margin-inline-start': value };
    utilities['.me-' + key] = { 'margin-inline-end': value };
    utilities['.ps-' + key] = { 'padding-inline-start': value };
    utilities['.pe-' + key] = { 'padding-inline-end': value };
    // Logical inset
    utilities['.start-' + key] = { 'inset-inline-start': value };
    utilities['.end-' + key] = { 'inset-inline-end': value };
  });

  addUtilities(utilities);
})

plugin(function({ addUtilities }) {
  addUtilities({
    '.text-gradient': {
      '-webkit-background-clip': 'text',
      'background-clip': 'text',
      '-webkit-text-fill-color': 'transparent',
      'color': 'transparent'
    }
  });
})

// Usage: combine with standard bg-gradient utilities
<h1 class='
  text-gradient
  bg-gradient-to-r
  from-purple-500
  to-blue-500
  text-4xl font-bold
'>
  Beautiful gradient text
</h1>

plugin(function({ matchUtilities }) {
  matchUtilities(
    {
      'grid-fill': (value) => ({
        gridTemplateColumns: 'repeat(auto-fill, minmax(' + value + ', 1fr))'
      }),
      'grid-fit': (value) => ({
        gridTemplateColumns: 'repeat(auto-fit, minmax(' + value + ', 1fr))'
      })
    },
    { values: { sm: '10rem', md: '15rem', lg: '20rem', xl: '25rem' } }
  );
})

// Usage:
// <div class='grid grid-fill-md gap-4'>
//   Items auto-arrange into columns of min 15rem
// </div>

plugin(function({ addUtilities }) {
  addUtilities({
    '.grid-area-page': {
      gridTemplateAreas:
        '"header header"' +
        '"sidebar main"' +
        '"footer footer"',
      gridTemplateColumns: '250px 1fr',
      gridTemplateRows: 'auto 1fr auto'
    },
    '.area-header': { gridArea: 'header' },
    '.area-sidebar': { gridArea: 'sidebar' },
    '.area-main': { gridArea: 'main' },
    '.area-footer': { gridArea: 'footer' }
  });
})

// Usage:
// <div class='grid grid-area-page min-h-screen'>
//   <header class='area-header'>...</header>
//   <aside class='area-sidebar'>...</aside>
//   <main class='area-main'>...</main>
//   <footer class='area-footer'>...</footer>
// </div>

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      keyframes: {
        wiggle: {
          '0%, 100%': { transform: 'rotate(-3deg)' },
          '50%': { transform: 'rotate(3deg)' }
        },
        heartbeat: {
          '0%, 100%': { transform: 'scale(1)' },
          '14%': { transform: 'scale(1.3)' },
          '28%': { transform: 'scale(1)' },
          '42%': { transform: 'scale(1.3)' },
          '70%': { transform: 'scale(1)' }
        }
      },
      animation: {
        wiggle: 'wiggle 1s ease-in-out infinite',
        heartbeat: 'heartbeat 1.5s ease-in-out infinite'
      }
    }
  }
};

// Usage: class='animate-wiggle' or class='animate-heartbeat'

<!-- test.html -->
<div class='scrollbar-hide overflow-y-auto h-48'>
  <p class='text-shadow-lg text-2xl font-bold text-gray-900'>Test</p>
  <div class='grid grid-fill-md gap-4'>
    <div class='bg-gray-100 p-4 rounded'>Card 1</div>
    <div class='bg-gray-100 p-4 rounded'>Card 2</div>
  </div>
</div>

<!-- Run: npx tailwindcss -i src/input.css -o test-output.css --content test.html -->
<!-- Inspect test-output.css for your custom utility classes -->

/*
  Custom Utilities Documentation
  ================================

  .scrollbar-hide
    Hides the scrollbar while preserving scroll functionality.
    Use with: overflow-y-auto, overflow-x-auto
    Example: <div class='overflow-y-auto h-64 scrollbar-hide'>

  .text-shadow-{size}
    Adds a text shadow. Sizes: sm, DEFAULT, lg.
    Example: <h1 class='text-shadow-lg text-3xl font-bold'>
    Arbitrary: <h1 class='text-shadow-[0_4px_8px_rgba(0,0,0,0.5)]'>

  .text-gradient
    Enables gradient text via background-clip: text.
    Must combine with bg-gradient-to-* and from-*/to-* utilities.
    Example: <span class='text-gradient bg-gradient-to-r from-purple-500 to-pink-500'>

  .grid-fill-{size}
    Auto-fill grid with minimum column width. Sizes: sm, md, lg, xl.
    Example: <div class='grid grid-fill-md gap-4'>
*/

// Avoid: generates 30+ utilities upfront
plugin(function({ addUtilities, theme }) {
  const spacing = theme('spacing'); // 30+ entries
  const utils = {};
  Object.entries(spacing).forEach(([k, v]) => {
    utils['.clip-' + k] = { clipPath: 'inset(' + v + ')' };
  });
  addUtilities(utils); // large CSS output
});

// Better: use matchUtilities with limited defaults
plugin(function({ matchUtilities, theme }) {
  matchUtilities(
    { 'clip': (v) => ({ clipPath: 'inset(' + v + ')' }) },
    { values: { none: '0', sm: '0.5rem', md: '1rem' } }
    // Users can still do clip-[2rem] for custom values
  );
});