🔹 Plugin در Tailwind چیه؟

Plugins بهت اجازه می‌دن قابلیت‌های جدید به Tailwind اضافه کنی یا Utilityهای موجود رو گسترش بدی.
با پلاگین‌ها می‌تونی:

• کلاس‌های سفارشی تعریف کنی

• کامپوننت بسازی

• رنگ‌ها، spacing و … رو گسترش بدی

🔹 اضافه کردن Plugin آماده

خیلی از پکیج‌ها پلاگین رسمی Tailwind دارن. مثلا forms:

npm install @tailwindcss/forms

📌 استفاده در تنظیمات:

module.exports = {
  theme: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/forms'),
  ],
}

🔹 ساخت Plugin سفارشی ساده

مثال: تعریف کلاس‌های Utility برای چرخش متن

const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ addUtilities }) {
      const newUtilities = {
        '.rotate-y-180': {
          transform: 'rotateY(180deg)',
        },
        '.rotate-x-180': {
          transform: 'rotateX(180deg)',
        },
      }
      addUtilities(newUtilities)
    })
  ]
}

📌 استفاده:

<div class="rotate-y-180">چرخش متن</div>

🔹 اضافه کردن Component سفارشی

module.exports = {
  plugins: [
    plugin(function({ addComponents }) {
      const buttons = {
        '.btn': {
          padding: '.5rem 1rem',
          borderRadius: '.25rem',
          fontWeight: '600',
        },
        '.btn-blue': {
          backgroundColor: '#1E3A8A',
          color: '#fff',
        },
      }
      addComponents(buttons)
    })
  ]
}

📌 استفاده:

<button class="btn btn-blue">دکمه سفارشی</button>

🔹 اضافه کردن Variant سفارشی

مثال: ساختن variant برای حالت فرزند آخر (last-child):

module.exports = {
  plugins: [
    plugin(function({ addVariant }) {
      addVariant('child-last', '& > *:last-child')
    })
  ]
}

📌 استفاده:

<ul class="child-last:text-red-500">
  <li>مورد اول</li>
  <li>مورد آخر (قرمز)</li>
</ul>

🔹 نکته مهم

• پلاگین‌ها می‌تونن ساده یا خیلی پیچیده باشن.

• پلاگین‌های رسمی Tailwind مثل: forms, typography, aspect-ratio آماده استفاده هستن.

• با پلاگین سفارشی می‌تونی Tailwind رو دقیقاً مطابق پروژه‌ات گسترش بدی.