رنگ‌ها، پس‌زمینه‌ها و Typography در Tailwind CSS

بعد از نصب و راه‌اندازی Tailwind CSS، اولین چیزی که هنگام طراحی یک صفحه وب با آن سروکار داریم، ظاهر محتوا است. رنگ متن، رنگ پس‌زمینه، اندازه نوشته، ضخامت فونت و فاصله بین خطوط، تأثیر زیادی روی خوانایی و ظاهر یک صفحه دارند. Tailwind CSS برای این موارد مجموعه‌ای از Utility Classهای کاربردی در اختیار ما قرار می‌دهد. در این مقاله یاد می‌گیریم چگونه با Tailwind رنگ متن و پس‌زمینه را تغییر دهیم، اندازه و ضخامت نوشته‌ها را کنترل کنیم و ظاهر متن‌های مختلف یک صفحه را به صورت عملی طراحی کنیم.v

بعد از نصب و راه‌اندازی Tailwind CSS، اولین چیزی که هنگام طراحی یک صفحه وب با آن سروکار داریم، ظاهر محتوا است. رنگ متن، رنگ پس‌زمینه، اندازه نوشته، ضخامت فونت و فاصله بین خطوط، تأثیر زیادی روی خوانایی و ظاهر یک صفحه دارند. Tailwind CSS برای این موارد مجموعه‌ای از Utility Classهای کاربردی در اختیار ما قرار می‌دهد. در این مقاله یاد می‌گیریم چگونه با Tailwind رنگ متن و پس‌زمینه را تغییر دهیم، اندازه و ضخامت نوشته‌ها را کنترل کنیم و ظاهر متن‌های مختلف یک صفحه را به صورت عملی طراحی کنیم.

رنگ‌ها در Tailwind CSS

رنگ یکی از ساده‌ترین و پرکاربردترین بخش‌های Tailwind CSS است.

برای تغییر رنگ متن معمولاً از ساختار زیر استفاده می‌کنیم:

text-{color}-{shade}

برای مثال:

<p class="text-blue-600">
    این یک متن آبی است.
</p>

در اینجا:

text-blue-600

رنگ متن را تعیین می‌کند.

Tailwind رنگ‌های مختلفی مانند موارد زیر دارد:

red
orange
yellow
green
blue
indigo
purple
pink
gray
slate

برای مثال:

<p class="text-red-600">پیام خطا</p>

<p class="text-green-600">عملیات موفق بود</p>

<p class="text-blue-600">اطلاعات</p>

<p class="text-gray-600">توضیحات</p>

مفهوم Shade در رنگ‌ها

در Tailwind معمولاً بعد از نام رنگ یک عدد قرار می‌گیرد.

برای مثال:

blue-100
blue-300
blue-500
blue-700
blue-900

این عدد نشان‌دهنده شدت یا طیف رنگ است.

به صورت ساده می‌توان تصور کرد:

Light
  ↓
100
200
300
400
500
600
700
800
900
  ↓
Dark

برای مثال:

<p class="text-blue-300">Blue 300</p>

<p class="text-blue-500">Blue 500</p>

<p class="text-blue-700">Blue 700</p>

در یک طراحی واقعی می‌توان از رنگ‌های روشن‌تر برای متن‌های فرعی و از رنگ‌های تیره‌تر برای عناصر مهم‌تر استفاده کرد.

نکته: لازم نیست در ابتدای یادگیری تمام رنگ‌ها و Shadeها را حفظ کنید. کافی است ساختار نام‌گذاری را درک کنید و هنگام نیاز از مستندات Tailwind یا پیشنهادهای ویرایشگر کد کمک بگیرید.

رنگ پس‌زمینه

برای تغییر رنگ پس‌زمینه از Utilityهایی با ساختار زیر استفاده می‌کنیم:

bg-{color}-{shade

برای مثال:

<div class="bg-blue-600">
    محتوای من
</div>

چند نمونه دیگر:

<div class="bg-gray-100">
    پس‌زمینه روشن
</div>

<div class="bg-gray-900">
    پس‌زمینه تیره
</div>

<div class="bg-green-500">
    پس‌زمینه سبز
</div>

تفاوت text-* و bg-* را به خاطر بسپارید:

text-* → Text Color
bg-*   → Background Color

ترکیب رنگ متن و پس‌زمینه

در بسیاری از موارد باید رنگ متن و پس‌زمینه را با هم تعیین کنیم.

برای مثال:

<div class="bg-blue-600 text-white">
    محتوای مهم
</div>

در اینجا:

• bg-blue-600 → پس‌زمینه آبی

• text-white → متن سفید

یک مثال دیگر:

<div class="bg-gray-100 text-gray-800">
    این یک بخش اطلاعاتی است.
</div>

این الگو در طراحی کارت‌ها، دکمه‌ها، پیام‌ها و بخش‌های مختلف صفحات بسیار رایج است.

رنگ‌های خاص

Tailwind علاوه بر رنگ‌های دارای Shade، رنگ‌های ساده‌ای مانند موارد زیر نیز دارد:

black
white
transparent
current
inherit

برای مثال:

<p class="text-black">
    متن مشکی
</p>

<p class="text-white">
    متن سفید
</p>

<div class="bg-transparent">
    بدون پس‌زمینه
</div>

Typography چیست؟

Typography یا تایپوگرافی به نحوه نمایش و تنظیم متن در صفحه گفته می‌شود.

در طراحی وب، مواردی مانند زیر بخشی از Typography هستند:

• اندازه متن

• ضخامت فونت

• ارتفاع خطوط

• فاصله حروف

• تراز متن

• سبک متن

Tailwind برای کنترل این موارد Utilityهای مختلفی دارد.

تغییر اندازه متن

برای تغییر اندازه متن از کلاس‌های text-* استفاده می‌کنیم.

برای مثال:

<p class="text-sm">
    متن کوچک
</p>

<p class="text-base">
    متن معمولی
</p>

<p class="text-lg">
    متن بزرگ
</p>

<p class="text-xl">
    متن خیلی بزرگ
</p>

برای عنوان‌ها نیز می‌توانیم از اندازه‌های بزرگ‌تر استفاده کنیم:

<h1 class="text-4xl">
    عنوان اصلی
</h1>

یا:

<h1 class="text-5xl">
    عنوان بزرگ
</h1>

به صورت ساده:

text-xs
text-sm
text-base
text-lg
text-xl
text-2xl
text-3xl
text-4xl
text-5xl
...

هرچه عدد بزرگ‌تر باشد، معمولاً اندازه متن نیز بزرگ‌تر خواهد بود.

ضخامت متن

برای تغییر ضخامت فونت از Utilityهایی مانند موارد زیر استفاده می‌کنیم:

font-thin
font-light
font-normal
font-medium
font-semibold
font-bold
font-extrabold
font-black

برای مثال:

<p class="font-normal">
    متن معمولی
</p>

<p class="font-medium">
    متن متوسط
</p>

<p class="font-semibold">
    متن نیمه ضخیم
</p>

<p class="font-bold">
    متن ضخیم
</p>

یکی از رایج‌ترین ترکیب‌ها برای عنوان‌ها:

<h1 class="text-3xl font-bold">
    عنوان صفحه
</h1>

تراز کردن متن

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

text-left
text-center
text-right
text-justify

مثلاً:

<p class="text-center">
    این متن در مرکز قرار دارد.
</p>

یا:

<p class="text-right">
    این متن راست‌چین است.
</p>

برای صفحات فارسی معمولاً راست‌چین بودن متن اهمیت زیادی دارد.

ارتفاع خطوط

ارتفاع خط یا Line Height روی خوانایی متن تأثیر زیادی دارد.

در Tailwind می‌توان از Utilityهای leading-* استفاده کرد.

برای مثال:

<p class="leading-7">
    این متن دارای فاصله مناسبی بین خطوط است و
    خوانایی آن نسبت به متن فشرده بیشتر خواهد بود.
</p>

چند نمونه رایج:

leading-none
leading-tight
leading-normal
leading-relaxed
leading-loose

همچنین می‌توان از مقادیر مشخص استفاده کرد:

<p class="leading-6">
    متن نمونه
</p>

<p class="leading-8">
    متن نمونه
</p>

فاصله بین حروف

برای کنترل فاصله بین حروف می‌توان از tracking-* استفاده کرد.

برای مثال:

<p class="tracking-wide">
    Text Example
</p>

نمونه‌های رایج:

tracking-tighter
tracking-tight
tracking-normal
tracking-wide
tracking-wider
tracking-widest

این قابلیت بیشتر برای متن‌های انگلیسی، عنوان‌ها و طراحی‌های خاص کاربرد دارد.

Italic و Normal

برای تغییر سبک نوشته می‌توان از:

italic
not-italic

استفاده کرد.

مثال:

<p class="italic">
    This is italic text.
</p>

و:

<p class="not-italic">
    This is normal text.
</p>

Underline و Decoration

برای ایجاد زیرخط روی متن:

<a class="underline" href="#">
    مشاهده بیشتر
</a>

و برای حذف زیرخط:

<a class="no-underline" href="#">
    مشاهده بیشتر
</a>

این ویژگی برای لینک‌ها بسیار کاربردی است.

تغییر ظاهر متن با ترکیب Utilityها

قدرت Tailwind زمانی بیشتر مشخص می‌شود که چند Utility را با هم ترکیب کنیم.

برای مثال:

<h1 class="text-4xl font-bold text-blue-700 text-center">
    فروشگاه آنلاین
</h1>

در اینجا:

text-4xl     → اندازه
font-bold    → ضخامت
text-blue-700 → رنگ
text-center  → تراز

بنابراین می‌توانیم بدون نوشتن CSS اختصاصی، ظاهر عنوان را ایجاد کنیم.

طراحی یک بخش معرفی

حالا یک مثال واقعی‌تر ایجاد کنیم.

<section class="bg-blue-600 text-white p-8">
    
    <h1 class="text-4xl font-bold text-center">
        به فروشگاه ما خوش آمدید
    </h1>

    <p class="text-lg text-center leading-8 mt-4">
        بهترین محصولات را با کیفیت مناسب
        در اختیار شما قرار می‌دهیم.
    </p>

</section>

در این مثال:

Section
 ├── Background
 ├── Text Color
 ├── Padding
 ├── Heading
 │    ├── Size
 │    ├── Weight
 │    └── Alignment
 └── Description
      ├── Size
      ├── Alignment
      └── Line Height

این نوع ترکیب Utilityها اساس کار با Tailwind CSS است.

ساخت یک کارت محصول

حالا یک نمونه کاربردی‌تر ایجاد کنیم:

<div class="bg-white p-6 rounded-xl shadow-md">

    <h2 class="text-2xl font-bold text-gray-800">
        لپ‌تاپ حرفه‌ای
    </h2>

    <p class="text-gray-600 leading-7 mt-3">
        یک لپ‌تاپ مناسب برای برنامه‌نویسی،
        طراحی وب و استفاده روزمره.
    </p>

    <p class="text-2xl font-bold text-blue-600 mt-4">
        ۵۰,۰۰۰,۰۰۰ تومان
    </p>

</div>

در این مثال چند مفهوم مهم را با هم ترکیب کرده‌ایم:

• رنگ پس‌زمینه

• رنگ متن

• اندازه متن

• ضخامت فونت

• فاصله بین خطوط

• فاصله عناصر

• Padding

• Border Radius

• Shadow

در مقالات بعدی برخی از این Utilityها را با جزئیات بیشتری بررسی خواهیم کرد.

استفاده از رنگ‌های مختلف در یک صفحه

فرض کنید یک صفحه ساده داریم:

<main class="bg-gray-100">

    <header class="bg-gray-900 text-white p-6">
        <h1 class="text-2xl font-bold">
            فروشگاه من
        </h1>
    </header>

    <section class="p-8">
        <h2 class="text-3xl font-bold text-gray-800">
            محصولات جدید
        </h2>

        <p class="text-gray-600 mt-3">
            محصولات جدید فروشگاه را مشاهده کنید.
        </p>
    </section>

</main>

در اینجا از یک الگوی ساده استفاده کرده‌ایم:

Page Background
      ↓
Header
      ↓
Content
      ↓
Heading
      ↓
Description

هر بخش رنگ و اندازه متن مخصوص خودش را دارد.

رنگ‌های سفارشی

در برخی پروژه‌ها ممکن است رنگ‌های پیش‌فرض Tailwind برای طراحی شما کافی نباشند.

برای مثال، یک برند ممکن است رنگ اختصاصی خود را داشته باشد:

Brand Primary
Brand Secondary
Brand Accent

در چنین شرایطی می‌توان Tailwind را مطابق نیاز پروژه سفارشی‌سازی کرد.

اما در ابتدای یادگیری بهتر است ابتدا با رنگ‌ها و Utilityهای استاندارد Tailwind کاملاً آشنا شوید و سپس به سراغ Customization و Theme بروید.

این موضوع در یکی از مقالات پایانی دوره بررسی خواهد شد.

نکته مهم درباره فونت فارسی

Tailwind وظیفه انتخاب یا نصب فونت فارسی را بر عهده ندارد.

اگر پروژه شما فارسی است، می‌توانید یک فونت مناسب فارسی را به پروژه اضافه کنید و سپس آن را در CSS یا تنظیمات پروژه استفاده کنید.

برای مثال، HTML می‌تواند به شکل زیر باشد:

<body class="font-sans">
    <h1 class="text-3xl font-bold">
        طراحی وب با Tailwind CSS
    </h1>
</body>

خود Tailwind بیشتر روی Utilityهای مربوط به Typography تمرکز دارد؛ انتخاب فونت واقعی پروژه موضوع جداگانه‌ای است.

یک پروژه کوچک برای تمرین

اکنون یک صفحه معرفی ساده ایجاد کنید:

<!DOCTYPE html>
<html lang="fa" dir="rtl">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>تمرین Tailwind CSS</title>

    <link rel="stylesheet" href="./src/output.css">
</head>

<body class="bg-gray-100">

    <main class="min-h-screen flex items-center justify-center p-6">

        <div class="bg-white p-8 rounded-xl shadow-md max-w-lg">

            <h1 class="text-4xl font-bold text-blue-700">
                یادگیری Tailwind CSS
            </h1>

            <p class="text-gray-600 leading-8 mt-4">
                با Tailwind CSS می‌توانیم رابط‌های کاربری
                مدرن و واکنش‌گرا را سریع‌تر ایجاد کنیم.
            </p>

            <p class="text-lg font-semibold text-gray-800 mt-4">
                از امروز شروع کنید!
            </p>

        </div>

    </main>

</body>

</html>

در این تمرین سعی کنید:

1. رنگ عنوان را تغییر دهید.

2. اندازه عنوان را تغییر دهید.

3. رنگ متن توضیحات را تغییر دهید.

4. ضخامت متن را تغییر دهید.

5. پس‌زمینه صفحه را تغییر دهید.

6. تراز عنوان را تغییر دهید.

این تمرین کمک می‌کند Utility Classها را به صورت عملی بشناسید.

جمع‌بندی

در این مقاله با یکی از مهم‌ترین بخش‌های Tailwind CSS یعنی رنگ‌ها و Typography آشنا شدیم. یاد گرفتیم که با text-* می‌توانیم رنگ متن و با bg-* رنگ پس‌زمینه را تعیین کنیم. همچنین با Utilityهای مربوط به اندازه متن، ضخامت فونت، تراز متن، ارتفاع خطوط، فاصله حروف و Decoration آشنا شدیم.

مهم‌ترین نکته در این مرحله این است که Utilityها را به صورت جداگانه و مفهومی یاد بگیریم. برای مثال بدانیم text-4xl مربوط به اندازه متن است و font-bold ضخامت متن را تغییر می‌دهد. سپس با ترکیب این Utilityها می‌توانیم ظاهر کامل عناصر را ایجاد کنیم.