💎 معرفی کتابخانه Tailwind Variants 💎

کتابخانه Tailwind Variants یک ابزار جانبی برای Tailwind CSS هستش که به شما کمک می‌کنه تا مدیریت کلاس‌های CSSای به شکل ساده تری انجام بشه و از شلوغی کد شما‌ جلوگیری میکنه 💥

این کتابخانه به شما این امکان رو می‌ده تا به آسانی حالت‌های مختلفی مثل رنگ، سایز و ... رو در یک کامپوننت با استفاده از کلاس‌های tailwind تعریف و مدیریت کنید.

✅ توی پست های بعدی به بررسی قابلیت های این کتابخانه جذاب میپردازیم

🌐 داکیومنت tailwind variants

#️⃣ #tailwind #tailwind_variants

🚀 @coolycode

در ادامه برای هر کدام از ویژگی‌هایی که ذکر کردم، مثالی آورده‌ام:

### ۱. تعریف حالت‌های مختلف (Variants):
فرض کنید می‌خواهید دکمه‌ای با حالت‌های رنگ مختلف ایجاد کنید، مثلاً یک دکمه primary و یک دکمه secondary. با Tailwind Variants می‌توانید به راحتی این حالات را تعریف کنید.

import { tv } from 'tailwind-variants';

const button = tv({
  base: 'font-medium text-white rounded-full active:opacity-80',
  variants: {
    color: {
      primary: 'bg-blue-500 hover:bg-blue-700',
      secondary: 'bg-purple-500 hover:bg-purple-700',
    },
  },
});

<button className={button({ color: 'primary' })}>Primary Button</button>
<button className={button({ color: 'secondary' })}>Secondary Button</button>

نتیجه:
دکمه اول آبی است و وقتی روی آن hover می‌شود تیره‌تر می‌شود. دکمه دوم بنفش است و با hover بنفش تیره می‌شود.

### ۲. حالت‌های ترکیبی (Compound Variants):
حالت‌های ترکیبی برای وقتی که می‌خواهید حالت‌های مختلف به صورت شرطی بر اساس یکدیگر تعریف شوند، کاربرد دارند. مثلاً اگر بخواهید دکمه‌ای در حالت غیرفعال و با رنگ خاص نشان داده شود.

const button = tv({
  base: 'font-semibold text-white text-sm py-1 px-4 rounded-full active:opacity-80',
  variants: {
    color: {
      primary: 'bg-blue-500 hover:bg-blue-700',
      success: 'bg-green-500 hover:bg-green-700',
    },
    disabled: {
      true: 'opacity-50 bg-gray-500 pointer-events-none',
    },
  },
  compoundVariants: [
    {
      color: 'success',
      disabled: true,
      class: 'bg-green-100 text-green-700',
    },
  ],
});

<button className={button({ color: 'success', disabled: true })}>Disabled Success Button</button>

نتیجه:
دکمه در حالت غیرفعال به رنگ سبز روشن و با شفافیت کمتر نمایش داده می‌شود و نمی‌توان روی آن کلیک کرد.

### ۳. استفاده از حالت‌های ریسپانسیو (Responsive Variants):
اگر می‌خواهید دکمه‌هایتان در سایزهای مختلف صفحه نمایش حالت‌های متفاوتی داشته باشند، می‌توانید حالت‌های ریسپانسیو را تعریف کنید.

const button = tv(
  {
    base: 'font-semibold text-white py-1 px-3 rounded-full active:opacity-80',
    variants: {
      color: {
        primary: 'bg-blue-500 hover:bg-blue-700',
        secondary: 'bg-purple-500 hover:bg-purple-700',
      },
    },
  },
  {
    responsiveVariants: ['xs', 'sm', 'md'],
  }
);

<button
  className={button({
    color: {
      initial: 'primary',
      xs: 'secondary',
      sm: 'primary',
      md: 'secondary',
    },
  })}
>
  Responsive Button
</button>

نتیجه:
دکمه در حالت اولیه به رنگ آبی است، اما در سایزهای مختلف صفحه نمایش، رنگ آن تغییر می‌کند؛ برای صفحه‌های کوچک‌تر (xs)، بنفش و برای بزرگ‌ترها آبی و سپس دوباره بنفش می‌شود.

### ۴. استفاده از حالت پیش‌فرض (Default Variants):
در این مثال، به صورت پیش‌فرض دکمه با سایز متوسط و رنگ primary تعریف شده است، اما می‌توانید با پارامترهای ورودی این حالت را تغییر دهید.

const button = tv({
  base: 'font-semibold text-white py-1 px-3 rounded-full active:opacity-80',
  variants: {
    color: {
      primary: 'bg-blue-500 hover:bg-blue-700',
      secondary: 'bg-purple-500 hover:bg-purple-700',
    },
    size: {
      sm: 'py-1 px-3 text-xs',
      md: 'py-1.5 px-4 text-sm',
      lg: 'py-2 px-6 text-md',
    },
  },
  defaultVariants: {
    size: 'md',
    color: 'primary',
  },
});

<button className={button({ size: 'sm', color: 'secondary' })}>Small Secondary Button</button>

نتیجه:
اگر پارامتر جدیدی وارد نکنید، دکمه به صورت پیش‌فرض با سایز متوسط و رنگ آبی نمایش داده می‌شود، اما اگر مقدار دیگری بدهید، مثلاً سایز کوچک و رنگ بنفش، دکمه به این شکل نمایش داده خواهد شد.

### ۵. Override کردن کلاس‌ها (Overriding Classes):
گاهی اوقات نیاز دارید که کلاس‌های تعریف‌شده را در لحظه تغییر دهید. با استفاده از خاصیت class می‌توانید به راحتی این کار را انجام دهید.

const button = tv({
  base: 'font-semibold text-white py-1 px-3 rounded-full active:opacity-80',
  variants: {
    color: {
      primary: 'bg-blue-500 hover:bg-blue-700',
      secondary: 'bg-purple-500 hover:bg-purple-700',
    },
  },
});

<button className={button({ color: 'primary', class: 'bg-red-500 hover:bg-red-700' })}>
  Red Button
</button>

نتیجه:
با اینکه دکمه primary به رنگ آبی است، می‌توانید با کلاس override شده، رنگ آن را به قرمز تغییر دهید.

---

این مثال‌ها به شما نشان می‌دهد که چگونه با استفاده از Tailwind Variants می‌توانید کد CSS تمیزتر و منعطف‌تری بنویسید. همچنین امکان مدیریت آسان‌تر حالت‌های مختلف برای المان‌ها و ترکیب آن‌ها به صورت ریسپانسیو وجود دارد【12†source】【13†source】【14†source】【15†source】【16†source】.

دهه نودی تو کوچه خلوت ... 🙂

پست جدید همین الان آپلود شد، هیچی نمیگم برید ببینید :)))😂

🌐 مشاهده پست

#️⃣ #NEWPost #instagram

🚀 @coolycode