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

Performance و Build

کاهش CSS و Performance UI

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

محتوای درس کاهش CSS و Performance UI

کاهش CSS و Performance UI را در این درس به‌صورت عملی بررسی می‌کنیم. هدف این است که علاوه بر شناخت Utilityها، دلیل انتخاب آن‌ها و روش ارزیابی نتیجه را نیز بدانید.

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

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

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

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

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

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

index.html
<img
  src="/tutorials/covers/tailwind-css.webp"
  width="1200"
  height="900"
  loading="lazy"
  alt="آموزش Tailwind CSS"
  class="aspect-[4/3] w-full object-cover"
/>

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

تصویر با ابعاد مشخص، Lazy Loading و نسبت ثابت.

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

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

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

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

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