Hover، Focus و States در Tailwind CSS

تا اینجا یاد گرفتیم چگونه با Tailwind CSS ساختار و ظاهر صفحات وب را ایجاد کنیم و آن‌ها را برای اندازه‌های مختلف صفحه Responsive کنیم. اما یک صفحه وب فقط یک ظاهر ثابت ندارد؛ بسیاری از عناصر زمانی که کاربر روی آن‌ها قرار می‌گیرد، کلیک می‌کند، داخل یک Input قرار می‌گیرد یا با آن‌ها تعامل دارد، باید ظاهر متفاوتی داشته باشند. Tailwind CSS برای این حالت‌ها از مفهومی به نام State Variants استفاده می‌کند. در این مقاله با حالت‌هایی مانند hover، focus، active، disabled و visited آشنا می‌شویم و با استفاده از آن‌ها Button، Link، Input، Card و فرم‌های تعاملی ایجاد می‌کنیم.

State در طراحی وب چیست؟

State یا حالت، وضعیت فعلی یک عنصر در زمان تعامل کاربر با آن است.

برای مثال یک Button می‌تواند حالت‌های مختلفی داشته باشد:

Normal
   ↓
Hover
   ↓
Active
   ↓
Disabled

یا یک Input می‌تواند چنین حالت‌هایی داشته باشد:

Normal
   ↓
Focus
   ↓
Typing
   ↓
Invalid

در CSS معمولی برای این حالت‌ها از Pseudo-classهایی مانند :hover و :focus استفاده می‌کنیم.

در Tailwind CSS می‌توانیم همین حالت‌ها را مستقیماً در Classهای HTML بنویسیم.

Hover چیست؟

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

برای مثال:

<button class="bg-blue-600 hover:bg-blue-700 text-white px-5 py-3 rounded-lg">
    خرید محصول
</button>

در حالت عادی:

bg-blue-600

استفاده می‌شود.

وقتی کاربر ماوس را روی Button قرار دهد:

hover:bg-blue-700

فعال می‌شود.

ساخت Button با Hover

یک Button ساده ایجاد کنیم:

<button class="rounded-lg bg-blue-600 px-6 py-3 font-semibold text-white hover:bg-blue-700">
    خرید محصول
</button>

ساختار آن:

Normal
bg-blue-600

Hover
hover:bg-blue-700

نکته مهم این است که hover: خودش یک Utility مستقل نیست؛ بلکه مشخص می‌کند Utility بعد از آن در چه حالتی فعال شود.

تغییر رنگ متن در Hover

می‌توانیم رنگ متن را نیز تغییر دهیم:

<a
    href="#"
    class="text-gray-600 hover:text-blue-600"
>
    مشاهده جزئیات
</a>

در حالت عادی:

text-gray-600

و هنگام Hover:

hover:text-blue-600

فعال است.

تغییر Border در Hover

<div class="rounded-xl border border-gray-200 p-6 hover:border-blue-500">
    Product Card
</div>

در این مثال Border کارت هنگام Hover تغییر می‌کند.

تغییر Shadow در Hover

می‌توانیم هنگام Hover سایه عنصر را نیز تغییر دهیم:

<div class="rounded-xl bg-white p-6 shadow-sm hover:shadow-lg">
    Product Card
</div>

در حالت عادی:

shadow-sm

و هنگام Hover:

hover:shadow-lg

استفاده می‌شود.

ترکیب چند حالت در Hover

می‌توانیم چند Utility را هم‌زمان تغییر دهیم:

<div
    class="rounded-xl border bg-white p-6 shadow-sm
           hover:-translate-y-1 hover:border-blue-500 hover:shadow-lg"
>
    Product Card
</div>

در این مثال هنگام Hover:

• کارت کمی به سمت بالا حرکت می‌کند.

• Border تغییر می‌کند.

• Shadow افزایش پیدا می‌کند.

البته برای اینکه حرکت نرم‌تر باشد، در ادامه دوره با transition کار خواهیم کرد.

Focus چیست؟

focus زمانی فعال می‌شود که یک عنصر Focus دریافت کند.

این حالت مخصوصاً برای فرم‌ها بسیار مهم است.

برای مثال:

<input
    type="text"
    class="rounded-lg border border-gray-300 px-4 py-3 focus:border-blue-500"
    placeholder="نام خود را وارد کنید"
>

وقتی Input فعال شود، Border آن به رنگ دیگری تغییر می‌کند.

استفاده از Focus Ring

Tailwind CSS Utilityهایی برای Ring دارد که برای Focus بسیار کاربردی هستند.

<input
    type="text"
    class="rounded-lg border border-gray-300 px-4 py-3
           focus:border-blue-500 focus:ring-2 focus:ring-blue-200"
    placeholder="نام کاربری"
>

در این مثال هنگام Focus:

focus:border-blue-500

Border را تغییر می‌دهد.

و:

focus:ring-2
focus:ring-blue-200

یک Ring اطراف Input ایجاد می‌کند.

چرا Focus مهم است؟

Focus فقط برای زیبایی نیست.

کاربرانی که با Keyboard کار می‌کنند باید بتوانند بفهمند در حال حاضر کدام عنصر فعال است.

برای مثال:

Tab
 ↓
Input 1
 ↓
Input 2
 ↓
Button
 ↓
Link

اگر Focus قابل مشاهده نباشد، استفاده از سایت برای این کاربران دشوار می‌شود.

بنابراین بهتر است Focus را به‌صورت واضح طراحی کنیم.

Hover و Focus هم‌زمان

می‌توانیم چند State را برای یک عنصر تعریف کنیم:

<button
    class="rounded-lg bg-blue-600 px-6 py-3 text-white
           hover:bg-blue-700
           focus:outline-none
           focus:ring-2
           focus:ring-blue-300"
>
    ارسال
</button>

در این مثال:

hover:
تغییر رنگ

focus:
نمایش Ring

هر State فقط زمانی فعال می‌شود که شرایط آن برقرار باشد.

Active چیست؟

active زمانی فعال می‌شود که کاربر در حال فعال کردن یک عنصر، مثلاً فشردن Button، باشد.

مثال:

<button
    class="rounded-lg bg-blue-600 px-6 py-3 text-white
           hover:bg-blue-700
           active:bg-blue-800"
>
    کلیک کنید
</button>

ترتیب حالت‌ها:

Normal
   ↓
Hover
   ↓
Active

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

Disabled چیست؟

گاهی یک عنصر باید غیرفعال باشد.

مثلاً زمانی که فرم هنوز کامل نشده است.

می‌توانیم از:

<button disabled>
    ارسال
</button>

استفاده کنیم.

برای طراحی ظاهر آن:

<button
    disabled
    class="rounded-lg bg-blue-600 px-6 py-3 text-white
           disabled:cursor-not-allowed
           disabled:opacity-50"
>
    ارسال
</button>

در حالت Disabled:

disabled:cursor-not-allowed
disabled:opacity-50

فعال می‌شوند.

چرا Disabled State مهم است؟

کاربر باید بتواند تفاوت بین Button فعال و غیرفعال را تشخیص دهد.

برای مثال:

Active Button
[ Submit ]

Disabled Button
[ Submit ]

اگر هر دو دقیقاً یک ظاهر داشته باشند، کاربر ممکن است نداند چرا امکان کلیک وجود ندارد.

Styling برای Placeholder

Tailwind CSS اجازه می‌دهد Placeholder را نیز تغییر دهیم.

<input
    type="text"
    placeholder="نام خود را وارد کنید"
    class="rounded-lg border px-4 py-3 placeholder:text-gray-400"
>

در اینجا:

placeholder:text-gray-400

رنگ Placeholder را مشخص می‌کند.

Focus در یک فرم واقعی

یک فرم ساده ایجاد کنیم:

<form class="mx-auto max-w-md space-y-5">

    <div>
        <label class="mb-2 block font-medium">
            نام
        </label>

        <input
            type="text"
            placeholder="نام خود را وارد کنید"
            class="w-full rounded-lg border border-gray-300 px-4 py-3
                   placeholder:text-gray-400
                   focus:border-blue-500
                   focus:ring-2
                   focus:ring-blue-200"
        >
    </div>

    <div>
        <label class="mb-2 block font-medium">
            ایمیل
        </label>

        <input
            type="email"
            placeholder="example@email.com"
            class="w-full rounded-lg border border-gray-300 px-4 py-3
                   placeholder:text-gray-400
                   focus:border-blue-500
                   focus:ring-2
                   focus:ring-blue-200"
        >
    </div>

    <button
        type="submit"
        class="w-full rounded-lg bg-blue-600 px-5 py-3
               font-semibold text-white
               hover:bg-blue-700
               focus:ring-2
               focus:ring-blue-300"
    >
        ثبت اطلاعات
    </button>

</form>

این الگو را می‌توان در فرم‌های Login، Register، Contact و Checkout استفاده کرد.

Visited چیست؟

برای Linkها می‌توان از State مربوط به لینک‌های بازدیدشده استفاده کرد:

<a
    href="#"
    class="text-blue-600 visited:text-purple-600"
>
    مشاهده مقاله
</a>

بعد از بازدید از لینک، visited: می‌تواند Style مشخص‌شده را اعمال کند.

با این حال در طراحی‌های مدرن معمولاً باید با دقت از این State استفاده کنیم تا تجربه کاربری قابل پیش‌بینی باقی بماند.

Group و Hover

یکی از قابلیت‌های بسیار کاربردی Tailwind، استفاده از group است.

فرض کنید می‌خواهیم وقتی کاربر روی کل Card قرار می‌گیرد، عنوان داخل Card تغییر کند.

ابتدا والد را با:

group

علامت‌گذاری می‌کنیم:

<div class="group rounded-xl border p-6">

    <h3 class="font-bold group-hover:text-blue-600">
        Product Title
    </h3>

    <p class="mt-2 text-gray-600">
        Product description
    </p>

</div>

حالا:

group-hover:text-blue-600

یعنی:

وقتی عنصر دارای group در حالت Hover قرار گرفت، این عنصر Style مشخص‌شده را دریافت کند.

مثال کامل Card با Group

<div
    class="group overflow-hidden rounded-xl border bg-white shadow-sm
           hover:shadow-lg"
>

    <img
        src="product.jpg"
        alt="Product"
        class="h-56 w-full object-cover"
    >

    <div class="p-5">

        <h3 class="text-lg font-bold group-hover:text-blue-600">
            Modern Product
        </h3>

        <p class="mt-2 text-gray-600">
            A simple product description.
        </p>

        <a
            href="#"
            class="mt-4 inline-block font-semibold text-gray-600
                   group-hover:text-blue-600"
        >
            View Product
        </a>

    </div>

</div>

اکنون وقتی کاربر روی کل Card قرار می‌گیرد، هم عنوان و هم Link می‌توانند تغییر کنند.

State برای عناصر فرزند

مفهوم group بسیار مهم است:

Parent
  group
    ↓
Child
  group-hover

یعنی State والد می‌تواند روی فرزند اثر بگذارد.

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

ساخت Navigation با Hover

مثال:

<nav class="flex items-center gap-6">

    <a
        href="#"
        class="text-gray-600 hover:text-blue-600"
    >
        Home
    </a>

    <a
        href="#"
        class="text-gray-600 hover:text-blue-600"
    >
        Products
    </a>

    <a
        href="#"
        class="text-gray-600 hover:text-blue-600"
    >
        About
    </a>

    <a
        href="#"
        class="text-gray-600 hover:text-blue-600"
    >
        Contact
    </a>

</nav>

این یکی از ساده‌ترین کاربردهای State در صفحات واقعی است.

ترکیب Responsive و States

می‌توانیم Responsive Design و States را با یکدیگر ترکیب کنیم.

برای مثال:

<button
    class="w-full rounded-lg bg-blue-600 px-5 py-3 text-white
           hover:bg-blue-700
           md:w-auto"
>
    خرید محصول
</button>

اینجا:

w-full

در موبایل فعال است.

و:

md:w-auto

در اندازه md به بعد فعال می‌شود.

همچنین:

hover:bg-blue-700

در حالت Hover فعال می‌شود.

بنابراین می‌توان چند نوع Variant را در یک عنصر استفاده کرد.

ترکیب Stateها در یک Card

یک Card کامل‌تر:

<div
    class="group rounded-xl border bg-white p-6 shadow-sm
           hover:-translate-y-1
           hover:border-blue-400
           hover:shadow-lg"
>

    <div class="flex items-center justify-between">

        <h3 class="font-bold group-hover:text-blue-600">
            Product
        </h3>

        <span
            class="rounded-full bg-green-100 px-3 py-1 text-sm
                   text-green-700"
        >
            Available
        </span>

    </div>

    <p class="mt-3 text-gray-600">
        Product description goes here.
    </p>

    <button
        class="mt-5 rounded-lg bg-blue-600 px-5 py-2 text-white
               hover:bg-blue-700
               active:bg-blue-800"
    >
        خرید
    </button>

</div>

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

group
group-hover
hover
active
border
shadow
flex
spacing

Stateها را با Transition ترکیب خواهیم کرد

در مثال‌های قبلی هنگام Hover تغییرات ممکن است ناگهانی باشند.

برای مثال:

<div class="shadow-sm hover:shadow-lg">
    Card
</div>

تغییر Shadow سریع اتفاق می‌افتد.

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

transition

استفاده کرد.

مثلاً:

<div class="transition hover:shadow-lg">
    Card
</div>

در مقاله بعدی به صورت کامل با Transition و Animation کار خواهیم کرد.

اشتباهات رایج

۱. فراموش کردن Focus

فقط طراحی Hover کافی نیست.

کاربرانی که با Keyboard کار می‌کنند نیز باید بتوانند عنصر فعال را تشخیص دهند.

۲. استفاده بیش از حد از Hover

نباید همه عناصر صفحه هنگام Hover تغییرات شدید داشته باشند.

State باید به کاربر بازخورد بدهد، نه اینکه باعث شلوغی رابط کاربری شود.

۳. غیرفعال کردن Focus بدون جایگزین

در صورت استفاده از:

focus:outline-none

بهتر است یک Focus Indicator جایگزین داشته باشیم.

مثلاً:

focus:outline-none focus:ring-2 focus:ring-blue-300

۴. فراموش کردن Disabled

اگر Button واقعاً غیرفعال است، بهتر است ظاهر آن نیز این موضوع را به کاربر نشان دهد.

تمرین عملی

یک Product Card طراحی کنید که ویژگی‌های زیر را داشته باشد:

حالت عادی

White Card
Border
Small Shadow

هنگام Hover

Larger Shadow
Blue Border
Title changes color

Button

در حالت عادی:

Blue

در Hover:

Darker Blue

در Active:

Even Darker

Input

در حالت عادی:

Gray Border

در Focus:

Blue Border
Blue Ring

Disabled Button

باید:

Lower Opacity
Not Allowed Cursor

داشته باشد.

جمع‌بندی

در این مقاله با Stateهای پرکاربرد Tailwind CSS آشنا شدیم و یاد گرفتیم چگونه رفتار بصری عناصر را هنگام تعامل کاربر کنترل کنیم.

مهم‌ترین مواردی که یاد گرفتیم:

hover:
تغییر ظاهر هنگام Hover

focus:
تغییر ظاهر هنگام Focus

active:
حالت فعال هنگام تعامل

disabled:
طراحی عنصر غیرفعال

visited:
استایل لینک بازدیدشده

group:
کنترل State فرزندان بر اساس والد

همچنین یاد گرفتیم که می‌توانیم این قابلیت‌ها را با Responsive Design ترکیب کنیم:

<button
    class="w-full bg-blue-600
           hover:bg-blue-700
           md:w-auto"
>
    خرید
</button>

اکنون صفحات ما علاوه بر Responsive بودن، می‌توانند نسبت به تعامل کاربر نیز واکنش مناسبی داشته باشند.