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

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

۱. جادوی رنگ‌ها در 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 واحد است.

درس قبلی

بازگشت به دوره

درس بعدی