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

شروع کار با Tailwind CSS

اولین صفحه با Play CDN برای تمرین سریع

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

محتوای درس اولین صفحه با Play CDN برای تمرین سریع

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

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

Tailwind یک چارچوب Utility-First است؛ هر کلاس معمولاً یک مسئولیت کوچک و قابل پیش‌بینی دارد. ترکیب Utilityها در HTML سرعت ساخت رابط را بالا می‌برد، اما نام‌گذاری معنایی عناصر، دسترس‌پذیری و استخراج اجزای تکراری همچنان ضروری است.

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

  1. ابتدا ساختار معنایی HTML را بدون وابستگی به ظاهر بسازید.
  2. Utilityهای چیدمان، فاصله، رنگ و Typography را مرحله‌به‌مرحله اضافه کنید.
  3. نتیجه را در عرض موبایل و دسکتاپ مقایسه کنید.

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

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

index.html
<!doctype html>
<html lang="fa" dir="rtl">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<body class="bg-slate-100 p-8">
  <h1 class="text-3xl font-black text-slate-900">سلام Tailwind</h1>
</body>
</html>

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

نمایش عنوان «سلام Tailwind» روی پس‌زمینه روشن.

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

  • Play CDN فقط برای آزمایش سریع است و انتخاب مناسبی برای Production نیست.
  • از افزودن کلاس‌های تصادفی بدون الگوی طراحی ثابت خودداری کنید.

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

کارت نمونه را با یک عنوان دوم، رنگ متفاوت و حالت موبایل بازسازی کنید.

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