لایه‌های تیلویند - مفهوم لایه‌ها در Tailwind

در تیلویند CSS، مفهوم "لایه‌ها" برای کنترل ترتیب CSS تولید شده به‌گونه‌ای استفاده می‌شود که اندازه فایل و حالت منحصر به فردی را بهینه کند. هدف این است که تعارضات بین کلاس‌های کاربردی، استایل‌های پایه و استایل‌های کامپوننت را به حداقل برساند. تیلویند سه لایه اصلی را تعریف می‌کند: پایه، کامپوننت‌ها و ابزارها یا کاربردی‌ها.

لایه‌ها مختص تیلویند نیستند و یک ویژگی جدید CSS به شمار می‌آیند.

نسخه کوتاه

تیلویند با سه لایه عرضه می‌شود:

- پایه: استایل‌های پایه برای عناصر HTML خام (مانند h1).

- کامپوننت‌ها: استایل‌های مشترک برای کامپوننت‌های قابل استفاده مجدد (مانند btn یا card).

- ابزارها یا کاربردی‌ها: کلاس‌های ابزاری یا کاربردی بسیار خاص برای تنظیم حاشیه برای عناصر خاص.

نسخه طولانی

لایه پایه (base)

لایه پایه جایی است که استایل‌های بنیادی که به عناصر HTML خام اعمال می‌شوند، پیدا می‌شود. این‌ها انتخابگرهای با خاصیت پایین هستند که شامل استایل‌های پیش‌فرض مرورگر می‌شوند و معمولاً شما این استایل‌ها را مستقیماً تغییر نمی‌دهید. در یک پروژه تیلویند، لایه پایه معمولاً با استفاده از دستور زیر

@layer base {}

برای شامل کردن هرگونه استایل پایه یا بازنویسی‌های سفارشی پر می‌شود.

مثال:

@layer base {
	h1 {
		@apply text-2xl;
	}
	p {
		@apply text-base;
	}
}

لایه کامپوننت‌ها (components)

لایه کامپوننت‌ها بعد از لایه پایه قرار می‌گیرد و جایی است که الگوهای طراحی مشترک به عنوان کامپوننت‌های قابل استفاده مجدد ، معمولاً با استفاده از اِعمال کلاس‌های کاربردی یا ابزاری با دستور @apply تیلویند، تعریف می‌شوند. این کامپوننت‌ها از نظر منحصربه فرد بودن، بالاتر از استایل‌های پایه هستند اما از کلاس‌های کاربردی پایین‌ترند.

کامپوننت‌ها معمولاً در فایل‌های CSS شما با استفاده از دستور زیر:

@layer components {}

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

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

لایه ابزارها (utilities)

لایه ابزارها جایی است که کلاس‌های ابزاری تیلویند تولید می‌شوند. این‌ها کلاس‌های بسیار خاص و تک‌منظوره‌ای هستند که یک کار انجام می‌دهند (مانند تنظیم حاشیه، پدینگ، تراز متن و غیره). این لایه به‌عنوان بالاترین لایه اختصاصی بودن یا specificity در نظر گرفته می‌شود و به‌طور مؤثر هرگونه استایل متعارض-متناقض (دارای برخورد conflict= مثل زمانی که رنگ متن توسط چندین کد تعیین میشود) از لایه‌های قبلی را بازنویسی می‌کند.

شما معمولاً لایه کاربردی‌ها را مستقیماً تغییر نمی‌دهید، زیرا تیلویند به‌طور خودکار آن را بر اساس پیکربندی شما تولید می‌کند. در اینجا یک مثال از برخی کلاس‌های کاربردی آورده شده است:

.mt-4 {
	margin-top: 1rem;
}

.text-center {
	text-align: center;
}

لایه ها در چه چیزهایی متفاوت هستند؟

• Specificity
• Purpose
• Customization
• Order in Generated CSS

- منحصر به فردبودن یا Specificity: استایل‌های پایه کمترین حالت اختصاصی را دارند، سپس کامپوننت‌ها و بعد از آن ابزارها (utilities) بالاترین حالت منحصر به فرد بودن را دارند. این اطمینان می‌دهد که کلاس‌های ابزاری می‌توانند در صورت نیاز سایر استایل‌ها را بازنویسی کنند.

- هدف Purpose: استایل‌های پایه، عناصر HTML خام را هدف میگیرند و استایل‌های بنیادی را تنظیم می‌کنند. کامپوننت‌ها الگوهای طراحی قابل استفاده مجدد ساخته شده از کلاس‌های ابزاری utility classes هستند. ابزارها کلاس‌های تک‌منظوره و بسیار خاص هستند که توسط تیلویند تولید می‌شوند.

- سفارشی‌سازی Customization: لایه‌های پایه و کامپوننت‌ها می‌توانند به‌راحتی با استفاده از دستور @apply و دستورهای @layer تیلویند گسترش یا سفارشی شوند، در حالی که کاربردی‌ها معمولاً بر اساس پیکربندی تیلویند شما تولید می‌شوند.

- ترتیب در CSS تولید شده Order in Generated CSS: لایه‌ها به‌گونه‌ای مرتب شده‌اند که استایل‌های پایه ابتدا در فایل CSS تولید شده قرار می‌گیرند، سپس کامپوننت‌ها و در نهایت کاربردی‌ها قرار می‌گیرند.

در این قسمت با جزئیات بیشتری درباره لایه ها در تیلویند حرف میزنیم:

مفهوم لایه‌ها در Tailwind

لایه‌ها در CSS: مفهوم لایه‌ها در Tailwind از CSS نشأت گرفته است. لایه‌ها در CSS به شما اجازه می‌دهند تا کنترل بیشتری بر ترتیب و اولویت اعمال استایل‌ها در سند HTML داشته باشید.

@layer:

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

ساختار و ویژگی‌های لایه‌ها در تیلویند:

سینتکس یا ساختار:

توضیح خلاصه و انگلیسی:

• @layer layer-name { rules }: Defines a named layer with CSS rules.
• @layer layer-name;: Defines a named layer without any rules.
• @layer layer-name, layer-name, layer-name;: Multiple layers can be defined at once.
• @layer { rules }: Creates an anonymous layer.

توضیح فارسی:

@layer layer-name { rules }:

هدف از کد بالا تعریف یک لایه با نام مشخص و حاوی قوانین CSS.

@layer layer-name;: 

هدف از کد بالا تعریف یک لایه با نام مشخص بدون هیچ قانونی.

@layer layer-name, layer-name, layer-name;:

هدف از کد بالا تعریف چندین لایه به طور همزمان.

@layer { rules }: 

هدف از کد بالا ایجاد یک لایه ناشناس.

نکات کلیدی لایه ها در تیلویند :

ترتیب اولویت: لایه‌هایی که ابتدا تعریف می‌شوند، اولویت کمتری دارند. آخرین لایه تعریف شده، حتی اگر اختصاصیت کمتری داشته باشد، اولویت بالاتری دارد.

لایه ناشناس: سبک‌هایی که در هیچ لایه دیگری تعریف نشده‌اند، در یک لایه ناشناس قرار می‌گیرند که بر همه لایه‌های دیگر، صرف نظر از اختصاصیت، اولویت دارد.

تودرتو بودن لایه‌ها: لایه‌ها می‌توانند درون لایه‌های دیگر قرار بگیرند.

اضافه کردن قوانین: می‌توانید قوانین را به لایه‌های موجود با مجدداً تعریف کردن لایه اضافه کنید؛ این کار ترتیب لایه را تغییر نمی‌دهد.

لایه با @import: لایه‌ها همچنین می‌توانند با استفاده از دستور @import تعریف شوند.

خلاصه نکات کلیدی لایه های تیلویند به انگلیسی:

• Order of Precedence
• Anonymous Layer
• Nesting Layers
• Appending Rules
• Layer with @import
  

خلاصه کاربردهای عملی لایه های تیلویند به انگلیسی:

Practical Applications

1. Full Layer Definition: @layer utilities { .padding-sm { padding: 0.5rem; } }
2. Layer Without Styles: @layer utilities;
3. Multiple Layers: @layer theme, layout, utilities;
4. Anonymous Layer: @layer { p { margin-block: 1rem; } }
5. Nesting: @layer framework { @layer layout { } }
   

کاربردهای عملی لایه های تیلویند:

تعریف لایه کامل :

 @layer utilities { .padding-sm { padding: 0.5rem; } }

لایه بدون سبک:

 @layer utilities;

لایه چندگانه Multiple :

 @layer theme, layout, utilities;

لایه ناشناس Anonymous:

 @layer { p { margin-block: 1rem; } }

تودرتو Nesting:

 @layer framework { @layer layout { } }

مزایای استفاده از لایه‌ها در تیلویند:

• سازماندهی بهتر CSS: لایه‌ها به شما کمک می‌کنند تا کد CSS خود را به بخش‌های منطقی‌تر تقسیم کنید.
• کنترل بیشتر بر اختصاصیت: با استفاده از لایه‌ها می‌توانید به طور دقیق‌تر کنترل کنید که کدام سبک‌ها بر سبک‌های دیگر اولویت دارند.
• سهولت نگهداری: لایه‌ها می‌توانند نگهداری کد CSS را در پروژه‌های بزرگ ساده‌تر کنند.
• با استفاده از لایه‌ها، می‌توانید ساختار CSS خود را بهبود بخشید، کنترل بیشتری بر اولویت سبک‌ها داشته باشید و کد خود را بهتر سازماندهی کنید.