فصل 22 از 27 درس 1 از 2

Performance و Build

Tailwind چگونه Classها را پیدا می‌کند؟

بخشی از آموزش جامع Tailwind CSS

محتوای درس Tailwind چگونه Classها را پیدا می‌کند؟

Tailwind چگونه Classها را پیدا می‌کند؟ را در این درس به‌صورت عملی بررسی می‌کنیم. هدف این است که علاوه بر شناخت Utilityها، دلیل انتخاب آن‌ها و روش ارزیابی نتیجه را نیز بدانید.

هدف و مفهوم اصلی

Tailwind فایل‌های Source را به‌صورت متن برای نام کامل کلاس‌ها اسکن می‌کند. کلاس‌های ساخته‌شده با الحاق رشته ممکن است وجود خارجی نداشته باشند؛ Variant Map با رشته‌های کامل هم قابل تشخیص و هم قابل نگهداری است.

روش پیاده‌سازی

  1. مسیرهای Source و فایل‌های نادیده‌گرفته‌شده را بررسی کنید.
  2. کلاس‌های پویا را به Map رشته‌های کامل تبدیل کنید.
  3. Build Production را اجرا و CSS و UI نهایی را کنترل کنید.

نمونه قابل اجرا

نمونه زیر را در پروژه خود اجرا کنید، سپس هر Utility را جداگانه تغییر دهید تا اثر آن روی Layout و ظاهر مشخص شود.

index.html
// بهتر
const variants = {
  blue: "bg-blue-600 hover:bg-blue-700",
  red: "bg-red-600 hover:bg-red-700",
};

// ضعیف
const className = `bg-${color}-600`;

خروجی مورد انتظار

Variantها به شکل String کامل نگهداری می‌شوند.

نکات مهم و خطاهای رایج

  • Dynamic Class ناقص در Development ممکن است به‌طور تصادفی کار کند و در Build حذف شود.
  • Safelist گسترده حجم CSS را بی‌دلیل بالا می‌برد.

تمرین پیشنهادی

برای سه رنگ مجاز Variant Map بسازید و Build نهایی را مقایسه کنید.

مطالعه مرجع رسمی مرتبط در مستندات Tailwind CSS