چگونگی عملکرد layer@ و apply@ در Tailwind CSS

با سلام خدمت همه دوستان و همراهان همیشگی وب سایت فراز کد:

در Tailwind CSS، دو قابلیت layer@ و apply@ به ما کمک می‌کنند که کدهای CSS تمیزتر و ساختارمندتری داشته باشیم و به صورت انعطاف‌پذیر از کلاس‌های از پیش ساخته‌شده تیلویند استفاده کنیم. در ادامه نحوه عملکرد هرکدام را توضیح می‌دهم.

دستور layer@ در تیلویند

دستور layer@ به ما امکان می‌دهد استایل‌های سفارشی خود را در چند لایه خاص دسته‌بندی کنیم. این لایه‌ها، در ترتیب بارگذاری CSS تأثیر می‌گذارند و به ما اجازه می‌دهند که از نظر ساختار، قوانین و اولویت‌بندی استایل‌هایمان را بهتر مدیریت کنیم. در تیلویند سه لایه اصلی وجود دارد:

لایه base: در این لایه، استایل‌های پایه قرار می‌گیرند که معمولاً برای ریست کردن تنظیمات پیش‌فرض مرورگرها یا اعمال تنظیمات کلی مثل فونت‌ها یا رنگ‌ها به‌کار می‌رود.
لایه components: این لایه برای تعریف کامپوننت‌های سفارشی مانند دکمه‌ها، کارت‌ها و سایر عناصر استفاده می‌شود. این لایه پس از base بارگذاری می‌شود.
لایه utilities: آخرین لایه، لایه utilities است که شامل ابزارهای کاربردی و کلاس‌های خاص و قابل استفاده مجدد می‌باشد.
این دسته‌بندی باعث می‌شود تا استایل‌های مختلف در ترتیب مناسبی بارگذاری شوند و کنترل بیشتری بر ترتیب اعمال استایل‌ها داشته باشیم.

مثال:

@layer base {
  body {
    font-family: 'Roboto', sans-serif;
  }
}

@layer components {
  .btn-custom {
    @apply bg-blue-500 text-white py-2 px-4 rounded;
  }
}

@layer utilities {
  .bg-main {
    background-color: #f3f4f6;
  }
}

در این مثال، layer base@ استایل‌های اولیه را تنظیم می‌کند، layer components@ یک دکمه سفارشی تعریف می‌کند، و layer utilities@ نیز یک کلاس کاربردی برای پس‌زمینه تعریف کرده است.

دستور apply@ در تیلویند

دستور apply@ برای ترکیب کلاس‌های تیلویند و ایجاد استایل‌های سفارشی به‌کار می‌رود. به کمک این دستور می‌توانیم چندین کلاس تیلویند را در یک کلاس جدید جمع کنیم و استایل‌های مشابه و تکراری را کاهش دهیم.

به طور مثال، اگر بخواهیم چندین کلاس تیلویند را که برای دکمه‌ها استفاده می‌شوند، در یک کلاس جداگانه بیاوریم، می‌توانیم از apply@ استفاده کنیم.

مثال

.button-primary {
  @apply bg-blue-600 text-white font-bold py-2 px-4 rounded-lg;
}

در این مثال، کلاس .button-primary شامل چندین کلاس تیلویند مثل bg-blue-600، text-white و غیره است. حالا می‌توانیم با یک نام ساده یعنی .button-primary، تمام این استایل‌ها را اعمال کنیم.

ترکیب @layer@ و apply@ در تیلویند

برای داشتن کد مرتب‌تر، می‌توانیم apply@ را داخل layer@ به‌کار ببریم. این روش به ما کمک می‌کند که هم ساختار لایه‌ای داشته باشیم و هم از استایل‌های سفارشی استفاده مجدد کنیم.

مثال ترکیبی

@layer components {
  .card {
    @apply bg-white shadow-md rounded p-4;
  }

  .card-title {
    @apply font-semibold text-lg mb-2;
  }

  .card-content {
    @apply text-gray-600;
  }
}

در این مثال، ما از apply@ داخل layer components@ استفاده کرده‌ایم و استایل‌های مرتبط با کارت را در یک لایه منظم سازماندهی کرده‌ایم. به این شکل، هر جزء از کارت از کلاس‌های تیلویند به صورت ترکیبی بهره می‌برد و ساختار کد بهینه می‌شود.

نتیجه گیری

layer@ برای دسته‌بندی استایل‌ها در لایه‌های مختلف (base، components، utilities) استفاده می‌شود که ترتیب بارگذاری را مشخص می‌کند.
apply@ برای استفاده مجدد از کلاس‌های تیلویند و ترکیب آن‌ها در کلاس‌های سفارشی به‌کار می‌رود.
این دو قابلیت در کنار هم، به شما اجازه می‌دهند تا کدهای CSS ساختارمند و قابل‌خواندن‌تری داشته باشید و از انعطاف‌پذیری بیشتری در مدیریت استایل‌های تیلویند برخوردار شوید.