فصل ۳: زیبایی‌شناسی در تیلوند

فصل ۳: زیبایی‌شناسی در تیلوند

رنگ‌ها، فاصله‌ها و تایپوگرافی

۱. جادوی رنگ‌ها در Tailwind

تیلوند یکی از زیباترین پالت‌های رنگی دنیا را دارد. رنگ‌ها در تیلوند از یک قانون ساده پیروی می‌کنند: نام رنگ + درجه تیره یا روشن بودن.

اعداد از 50 (بسیار روشن) شروع شده و تا 950 (بسیار تیره) ادامه دارند. عدد 500 معمولاً رنگ اصلی یا استاندارد است.

مثال:
  • text-blue-600: متن آبی نیمه‌تیره
  • bg-red-200: پس‌زمینه قرمز بسیار روشن (صورتی ملایم)
  • border-slate-900: حاشیه سرمه‌ای مایل به مشکی

۲. فاصله‌ها (Padding و Margin)

در CSS معمولی، تنظیم فاصله‌ها وقت‌گیر است. در تیلوند اعداد جادویی وجود دارند (مثلاً 1، 2، 4، 8 و …). هر واحد در تیلوند برابر با 0.25rem یا حدود 4 پیکسل است.

  • P برای Padding (فاصله داخلی): مثل p-4
  • M برای Margin (فاصله خارجی): مثل m-8

جهت‌ها را بشناسید:

pt-4 (بالا) | pb-4 (پایین) | pr-4 (راست) | pl-4 (چپ)
px-4 (چپ و راست همزمان) | py-4 (بالا و پایین همزمان)

۳. کار با متن و فونت

برای کنترل متن‌ها، کلاس‌های زیر پرکاربردترین‌ها هستند:

  • اندازه متن: از text-xs (خیلی کوچک) تا text-9xl (خیلی بزرگ).
  • ضخامت متن: font-light، font-normal، font-bold و font-black.
  • فاصله بین حروف: tracking-wide یا tracking-tight.

تمرین عملی: ساخت یک کارت اعلان شیک

به کلاس‌های استفاده شده و ترتیب آن‌ها در کد چپ‌چین زیر دقت کنید:

<div class=”bg-indigo-50 p-8 rounded-2xl border-2 border-indigo-200“>
  <h2 class=”text-indigo-900 text-2xl font-black mb-2“>
    Lesson Three Completed!
  </h2>
  <p class=”text-indigo-700 font-medium“>
    You are learning colors and spacing.
  </p>
  <button class=”mt-6 bg-indigo-600 text-white px-6 py-2 rounded-lg hover:bg-indigo-700 transition“>
    Next Lesson
  </button>
</div>

* در کد بالا mb-2 به معنی Margin Bottom (فاصله از پایین) به مقدار 2 واحد است.

تمرین برای شما:

یک کارت بسازید که پس‌زمینه آن bg-slate-900 باشد و متن داخل آن text-yellow-400. از پدینگ p-10 برای ایجاد فضای تنفس بزرگ در کارت استفاده کنید.

در درس چهارم، به سراغ “چیدمان و ریسپانسیو سازی” می‌رویم؛ جایی که یاد می‌گیرید سایتتان در موبایل هم عالی دیده شود!