کلاسهای Utility مستقیم در مقابل دایرکتیو @apply
در روش معمول Tailwind، کلاسهای Utility مستقیماً در HTML/JSX نوشته میشوند و همه استایل در همان مارکآپ قابل مشاهده است، در حالی که @apply این امکان را میدهد چند کلاس Utility را در یک کلاس CSS سفارشی جدید ترکیب کنید تا از تکرار مکرر یک ترکیب طولانی از کلاسها در چند جای مختلف جلوگیری شود.
| ویژگی | کلاسهای Utility مستقیم | دایرکتیو @apply |
|---|---|---|
| محل استایل | مستقیم در مارکآپ | فایل CSS جداگانه |
| تکرار کد | ممکن است زیاد شود | کمتر |
| همخوانی با فلسفه Tailwind | کامل | جزئی خروج از الگو |
کِی از کلاسهای Utility مستقیم استفاده کنیم؟
برای اکثر موارد؛ روش پیشفرض و توصیهشده Tailwind است و باعث میشود استایل و ساختار در یکجا و قابل ردیابی باشند.
کِی از دایرکتیو @apply استفاده کنیم؟
وقتی یک ترکیب یکسان و طولانی از کلاسها (مثل استایل دکمه اصلی) در چندین کامپوننت مختلف مدام تکرار میشود.
مثال کلاسهای Utility مستقیم
<button class="px-4 py-2 bg-blue-600 text-white
rounded-lg hover:bg-blue-700">
ثبتنام
</button>
مثال دایرکتیو @apply
.btn-primary {
@apply px-4 py-2 bg-blue-600 text-white
rounded-lg hover:bg-blue-700;
}
اشتباه رایج
اشتباه رایج استفاده افراطی از @apply برای هر عنصر است که فلسفه اصلی Utility-first Tailwind را از بین میبرد و دوباره برنامه را به سمت نوشتن CSS سنتی و جدا از مارکآپ میبرد؛ @apply باید فقط برای الگوهای واقعاً تکرارشونده بهکار رود.
جمعبندی
برای اکثر استایلدهیها مستقیماً از کلاسهای Utility استفاده کنید و @apply را فقط برای الگوهای تکرارشونده و پرکاربرد نگه دارید.