Shadow، Opacity و Utilityهای کاربردی در Tailwind CSS

در دو مقاله قبلی با رنگ‌ها، Typography، فاصله‌ها، اندازه‌ها و Borderها در Tailwind CSS آشنا شدیم. اما برای ایجاد یک رابط کاربری زیبا و حرفه‌ای، هنوز چند ویژگی مهم باقی مانده است. Shadow، Opacity، Visibility و سایر Utilityهای کاربردی به ما کمک می‌کنند عناصر صفحه را بهتر از یکدیگر جدا کنیم، ظاهر آن‌ها را کنترل کنیم و رابط کاربری خواناتر و جذاب‌تری بسازیم. در این مقاله این Utilityها را به صورت ساده و عملی بررسی می‌کنیم و در پایان چند نمونه واقعی مانند کارت، دکمه و پیام اطلاع‌رسانی ایجاد خواهیم کرد.

Shadow چیست؟

Shadow یا سایه، یک جلوه بصری است که باعث می‌شود یک عنصر از پس‌زمینه جدا به نظر برسد.

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

<div class="bg-white p-6 rounded-xl">
    محتوای کارت
</div>

با اضافه کردن Shadow:

<div class="bg-white p-6 rounded-xl shadow-md">
    محتوای کارت
</div>

کارت برجسته‌تر دیده می‌شود.

انواع Shadow

Tailwind چند سطح مختلف برای Shadow در اختیار ما قرار می‌دهد.

برخی از Utilityهای رایج:

shadow-sm
shadow
shadow-md
shadow-lg
shadow-xl
shadow-2xl
shadow-inner
shadow-none

به صورت کلی:

Shadow Size
    ↓
small
  ↓
medium
  ↓
large
  ↓
extra large

برای مثال:

<div class="shadow-sm">
    Small Shadow
</div>

<div class="shadow-md">
    Medium Shadow
</div>

<div class="shadow-xl">
    Large Shadow
</div>

چه زمانی از Shadow استفاده کنیم؟

Shadow بیشتر برای ایجاد Visual Hierarchy یا سلسله‌مراتب بصری استفاده می‌شود.

برای مثال:

• کارت‌های محصول

• پنل‌ها

• منوها

• Modalها

• دکمه‌ها

• Navigation

• فرم‌ها

اما استفاده بیش از حد از Shadow می‌تواند ظاهر صفحه را شلوغ کند.

نکته: Shadow قرار نیست روی همه عناصر صفحه استفاده شود. معمولاً کافی است روی عناصری قرار بگیرد که باید از پس‌زمینه متمایز باشند.

حذف Shadow

اگر عنصری Shadow داشته باشد، می‌توان آن را حذف کرد:

<div class="shadow-none">
    بدون سایه
</div>

این Utility زمانی مفید است که بخواهید Shadow یک کامپوننت را در شرایط خاص حذف کنید.

Opacity چیست؟

Opacity میزان شفافیت یک عنصر را مشخص می‌کند.

مقدار Opacity بین کاملاً شفاف و کاملاً غیرشفاف قرار می‌گیرد.

به صورت ساده:

Opacity
  0   → Completely Transparent
  |
  50  → Semi Transparent
  |
  100 → Completely Visible

در Tailwind می‌توان از Utilityهایی مانند زیر استفاده کرد:

opacity-0
opacity-25
opacity-50
opacity-75
opacity-100

مثال Opacity

<div class="opacity-50">
    این عنصر نیمه شفاف است.
</div>

یا:

<div class="opacity-75">
    این عنصر تا حدی شفاف است.
</div>

برای حالت کاملاً قابل مشاهده:

<div class="opacity-100">
    عنصر کاملاً قابل مشاهده
</div>

استفاده از Opacity برای تصاویر

Opacity برای تصاویر نیز کاربرد دارد.

<img
    src="image.jpg"
    alt="تصویر محصول"
    class="opacity-75"
>

در این حالت تصویر کمی شفاف می‌شود.

استفاده از Opacity در حالت Hover

یکی از کاربردهای جذاب Opacity ترکیب آن با hover است.

مثلاً:

<img
    src="image.jpg"
    alt="محصول"
    class="opacity-75 hover:opacity-100"
>

در حالت عادی تصویر کمی شفاف است، اما وقتی کاربر نشانگر ماوس را روی آن قرار می‌دهد، Opacity به 100 تغییر می‌کند.

در مقاله مربوط به States و تعاملات این مفهوم را به صورت کامل‌تر بررسی خواهیم کرد.

Visibility

گاهی می‌خواهیم یک عنصر قابل مشاهده یا غیرقابل مشاهده باشد.

برای این کار می‌توان از:

visible
invisible

استفاده کرد.

مثال:

<div class="visible">
    این عنصر قابل مشاهده است.
</div>

و:

<div class="invisible">
    این عنصر دیده نمی‌شود.
</div>

تفاوت مهم این است که invisible عنصر را از Layout حذف نمی‌کند؛ فقط آن را از دید کاربر مخفی می‌کند.

تفاوت Invisible و Hidden

این دو مفهوم را با هم اشتباه نگیرید.

invisible:

<div class="invisible">
    محتوا
</div>

عنصر همچنان فضای خود را حفظ می‌کند، اما دیده نمی‌شود.

اما hidden:

<div class="hidden">
    محتوا
</div>

عنصر از Layout حذف می‌شود.

به صورت ساده:

invisible
    ↓
Hidden visually
    +
Space remains

hidden
    ↓
Element removed
    +
Space removed

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

Cursor

هنگام ساخت عناصر تعاملی، گاهی لازم است شکل نشانگر ماوس را تغییر دهیم.

برای مثال:

<button class="cursor-pointer">
    کلیک کنید
</button>

یا:

<div class="cursor-not-allowed">
    قابل استفاده نیست
</div>

این Utilityها بیشتر زمانی کاربرد دارند که ظاهر عنصر باید رفتار آن را برای کاربر واضح‌تر کند.

Select

گاهی می‌خواهیم کاربر نتواند متن یک عنصر را انتخاب کند.

برای مثال:

<div class="select-none">
    این متن قابل انتخاب نیست.
</div>

یا برای فعال کردن انتخاب:

<p class="select-text">
    این متن قابل انتخاب است.
</p>

این قابلیت برای بعضی عناصر رابط کاربری مفید است، اما نباید بدون دلیل از select-none برای محتوای متنی استفاده کنیم.

Overflow

Overflow زمانی اهمیت پیدا می‌کند که محتوای یک عنصر از اندازه تعیین‌شده آن بزرگ‌تر باشد.

برای مثال:

<div class="w-64 h-32 overflow-hidden">
    محتوای طولانی که ممکن است
    از محدوده عنصر خارج شود.
</div>

در اینجا:

overflow-hidden

محتوای خارج از محدوده را پنهان می‌کند.

Utilityهای رایج:

overflow-auto
overflow-hidden
overflow-visible
overflow-scroll

Overflow Auto

یکی از کاربردهای رایج overflow-auto ایجاد Scroll در صورت نیاز است.

<div class="w-64 h-32 overflow-auto">
    محتوای بسیار طولانی...
</div>

اگر محتوا از محدوده خارج شود، مرورگر امکان Scroll را فراهم می‌کند.

Object Fit برای تصاویر

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

Tailwind Utilityهایی مانند:

object-contain
object-cover
object-fill
object-none

در اختیار ما قرار می‌دهد.

یکی از رایج‌ترین موارد:

<img
    src="product.jpg"
    alt="محصول"
    class="w-full h-64 object-cover"
>

object-cover باعث می‌شود تصویر محدوده تعیین‌شده را پوشش دهد.

این روش برای تصاویر کارت محصولات بسیار کاربردی است.

ترکیب Shadow و Border

گاهی برای ساخت یک کارت حرفه‌ای، Shadow و Border را با هم استفاده می‌کنیم:

<div class="bg-white border border-gray-200 rounded-xl shadow-md p-6">
    <h2 class="text-xl font-bold">
        محصول جدید
    </h2>

    <p class="mt-2 text-gray-600">
        توضیحات محصول
    </p>
</div>

در اینجا:

bg-white
     ↓
Background

border
     ↓
Border

rounded-xl
     ↓
Rounded Corners

shadow-md
     ↓
Shadow

p-6
     ↓
Padding

ترکیب این Utilityها یک الگوی بسیار رایج در طراحی رابط کاربری است.

ساخت یک Product Card

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

<div class="max-w-sm overflow-hidden rounded-xl bg-white shadow-md">

    <img
        src="product.jpg"
        alt="تصویر محصول"
        class="h-56 w-full object-cover"
    >

    <div class="p-6">

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

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

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

        <button class="mt-5 rounded-lg bg-blue-600 px-5 py-2 text-white">
            مشاهده محصول
        </button>

    </div>

</div>

در این مثال:

• overflow-hidden باعث می‌شود تصویر از گوشه‌های کارت بیرون نزند.

• rounded-xl گوشه‌های کارت را گرد می‌کند.

• shadow-md سایه ایجاد می‌کند.

• object-cover تصویر را متناسب با محدوده نمایش می‌دهد.

• p-6 فضای داخلی ایجاد می‌کند.

ساخت پیام اطلاع‌رسانی

می‌توانیم با Utilityهای ساده یک پیام اطلاع‌رسانی ایجاد کنیم:

<div class="rounded-lg border border-blue-200 bg-blue-50 p-4">

    <h3 class="font-bold text-blue-800">
        اطلاعیه
    </h3>

    <p class="mt-1 text-blue-700">
        اطلاعات حساب شما با موفقیت به‌روزرسانی شد.
    </p>

</div>

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

برای مثال پیام موفقیت:

<div class="rounded-lg border border-green-200 bg-green-50 p-4">
    <p class="text-green-700">
        عملیات با موفقیت انجام شد.
    </p>
</div>

پیام خطا:

<div class="rounded-lg border border-red-200 bg-red-50 p-4">
    <p class="text-red-700">
        انجام عملیات با خطا مواجه شد.
    </p>
</div>

در اینجا رنگ، Border و پس‌زمینه با یکدیگر هماهنگ شده‌اند تا نوع پیام برای کاربر قابل تشخیص باشد.

ساخت یک Button ساده

اکنون Utilityهای مختلف را برای ساخت یک دکمه ترکیب کنیم:

<button class="rounded-lg bg-blue-600 px-6 py-3 font-semibold text-white shadow-md">
    ثبت سفارش
</button>

این دکمه شامل موارد زیر است:

rounded-lg     → Rounded Corners
bg-blue-600    → Background
px-6           → Horizontal Padding
py-3           → Vertical Padding
font-semibold  → Font Weight
text-white     → Text Color
shadow-md      → Shadow

در این مرحله یک نکته مهم را مشاهده می‌کنید: Tailwind زمانی قدرتمند می‌شود که Utilityهای کوچک را با یکدیگر ترکیب کنیم.

استفاده از Utilityهای مختلف در یک پروژه

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

<main class="min-h-screen bg-gray-100 p-8">

    <div class="mx-auto max-w-md">

        <div class="overflow-hidden rounded-xl bg-white shadow-lg">

            <div class="bg-blue-600 p-6 text-white">

                <h1 class="text-3xl font-bold">
                    حساب کاربری
                </h1>

                <p class="mt-2 opacity-90">
                    اطلاعات حساب خود را مدیریت کنید.
                </p>

            </div>

            <div class="p-6">

                <div class="rounded-lg border border-green-200 bg-green-50 p-4">
                    <p class="font-medium text-green-700">
                        حساب شما فعال است.
                    </p>
                </div>

                <button class="mt-6 w-full rounded-lg bg-blue-600 px-5 py-3 font-semibold text-white shadow-md">
                    ادامه
                </button>

            </div>

        </div>

    </div>

</main>

در این مثال از چندین مفهوم استفاده شده است:

Page
 └── Card
      ├── Header
      │    ├── Background
      │    ├── Text
      │    └── Opacity
      │
      └── Content
           ├── Message
           │    ├── Border
           │    └── Background
           │
           └── Button
                ├── Background
                ├── Padding
                ├── Shadow
                └── Typography

نکته مهم درباره استفاده از Utilityها

در Tailwind ممکن است وسوسه شوید برای هر عنصر تعداد زیادی Utility اضافه کنید.

مثلاً:

<div class="bg-white p-6 m-4 border border-gray-200 rounded-xl shadow-md opacity-100 ...">

تعداد زیاد کلاس‌ها همیشه به معنی طراحی بهتر نیست.

بهتر است قبل از اضافه کردن هر Utility از خودتان بپرسید:

آیا این Utility واقعاً برای طراحی یا تجربه کاربری لازم است؟

اگر پاسخ منفی است، آن را اضافه نکنید.

یک تمرین عملی

یک کارت برای معرفی یک دوره آموزشی بسازید.

کارت شما باید شامل موارد زیر باشد:

Course Card
 ├── Image
 ├── Title
 ├── Description
 ├── Price
 └── Button

سعی کنید از Utilityهای زیر استفاده کنید:

shadow-md
rounded-xl
overflow-hidden
object-cover
opacity-...
border
bg-...
text-...
p-...
m-...

سپس مقدار Shadow، Opacity، Border و رنگ‌ها را تغییر دهید و نتیجه را در مرورگر مشاهده کنید.

جمع‌بندی

در این مقاله با چند Utility مهم و کاربردی Tailwind CSS آشنا شدیم. یاد گرفتیم چگونه با shadow-* به عناصر سایه اضافه کنیم، با opacity-* میزان شفافیت را کنترل کنیم و با visible و invisible وضعیت نمایش عناصر را مدیریت کنیم. همچنین با Utilityهای مرتبط با Cursor، انتخاب متن، Overflow و نحوه نمایش تصاویر آشنا شدیم.

مهم‌ترین موضوع این مقاله، ترکیب Utilityهای مختلف برای ساخت عناصر واقعی بود. یک کارت، دکمه یا پیام ساده معمولاً فقط با یک کلاس ساخته نمی‌شود؛ بلکه چند Utility در کنار یکدیگر قرار می‌گیرند تا ظاهر موردنظر ایجاد شود.