Mid⏱ 12 دقیقه1 بخش · 3 نکته

مرور سریع Tailwind CSS

فریمورک CSS Utility-first که استایل را مستقیم در HTML با کلاس‌های تک‌منظوره می‌سازد.

0 از 3 نکته مرور شد0٪

فقط نکات طلایی ⭐

فهرست بخش‌ها

فلسفهٔ Utility-First0/3

فلسفهٔ Utility-First0/3

تفاوت رویکرد Tailwind با CSS سنتی.

Utility-First چیست⭐ طلایی

به‌جای نوشتن CSS سفارشی با نام کلاس معنایی (مثل .card-title)، از کلاس‌های تک‌منظورهٔ از پیش‌ساخته (مثل text-lg، font-bold، mt-4) مستقیم در HTML استفاده می‌شود.

html\n<h1 class=""text-2xl font-bold text-blue-600 mt-4"">عنوان</h1>\n

💡 نکتهٔ مصاحبه:

اگر پرسیدند مزیت اصلی Tailwind چیست، به حذف نیاز به نام‌گذاری کلاس و context-switching بین فایل HTML و CSS اشاره کنید.

Purge/JIT و حجم نهایی CSSمهم

موتور Just-In-Time تنها کلاس‌هایی را که واقعاً در کد استفاده شده‌اند در خروجی نهایی تولید می‌کند، پس با وجود هزاران کلاس ممکن، حجم فایل CSS نهایی بسیار کوچک می‌ماند.

⚠️ اشتباه رایج:

نگرانی رایج مبتدیان که Tailwind باعث حجم بالای CSS می‌شود — در عمل با JIT خروجی نهایی معمولاً کوچک‌تر از CSS سفارشی بزرگ است.

Responsive و Variant Prefixesمهم

با پیشوندهایی مثل md: یا hover: می‌توان رفتار یک کلاس را در شرایط خاص (اندازهٔ صفحه، حالت Hover) تغییر داد، بدون نوشتن Media Query جداگانه.

html\n<div class=""text-sm md:text-lg hover:text-red-500"">متن</div>\n