BenoService

آکادمی بنو/آموزش Tailwind

ساخت صفحات Responsive با Tailwind CSS

بهنام نوبخت · ۱۴۰۵/۷/۱۳

در مقاله قبل با Responsive Design و Breakpointهای Tailwind CSS آشنا شدیم و یاد گرفتیم چگونه ظاهر یک عنصر را در اندازه‌های مختلف صفحه تغییر دهیم. اما یادگیری Responsive Design فقط با شناختن sm:، md: و lg: کامل نمی‌شود؛ باید بتوانیم این مفاهیم را در یک صفحه واقعی به کار ببریم. در این مقاله یک صفحه وب را مرحله‌به‌مرحله طراحی می‌کنیم و از Container، Flexbox، Grid، Spacing، Typography و Breakpointها در کنار یکدیگر استفاده خواهیم کرد. هدف این مقاله این است که ببینیم چگونه یک Layout که در موبایل مناسب است، در تبلت و دسکتاپ نیز به شکل صحیح تغییر کند.

Responsive Page چیست؟

یک صفحه Responsive باید بتواند خودش را با عرض صفحه کاربر تطبیق دهد.

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

Header
   ↓
Hero
   ↓
Product
   ↓
Product
   ↓
Product
   ↓
Footer

اما در دسکتاپ:

Header
   ↓
+-----------------------------+
|          Hero               |
+-----------------------------+
   ↓
+---------+---------+---------+
| Product | Product | Product |
+---------+---------+---------+
   ↓
Footer

یعنی ساختار محتوا می‌تواند یکسان باشد، اما نحوه نمایش آن تغییر کند.

اصل مهم: Mobile-First

در Tailwind CSS بهتر است ابتدا نسخه موبایل را طراحی کنیم.

برای مثال:

<div class="flex flex-col md:flex-row">
    ...
</div>

در حالت پایه:

flex-col

فعال است.

و از md به بعد:

md:flex-row

فعال می‌شود.

بنابراین ابتدا Layout موبایل را ساخته‌ایم و سپس آن را برای صفحه بزرگ‌تر تغییر داده‌ایم.

پروژه‌ای که در این مقاله می‌سازیم

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

Header
Hero Section
Category Section
Product Section
Call To Action
Footer

هدف این نیست که یک فروشگاه کامل بسازیم؛ هدف این است که نحوه ساخت یک صفحه Responsive واقعی با Tailwind CSS را یاد بگیریم.

مرحله اول — ساخت ساختار HTML

ابتدا ساختار کلی صفحه را ایجاد می‌کنیم:

<body>

    <header>
        ...
    </header>

    <main>

        <section>
            ...
        </section>

        <section>
            ...
        </section>

        <section>
            ...
        </section>

    </main>

    <footer>
        ...
    </footer>

</body>

در ادامه هر قسمت را تکمیل می‌کنیم.

مرحله دوم — ساخت Header Responsive

ابتدا یک Header ساده ایجاد می‌کنیم:

<header class="border-b bg-white">

    <div class="mx-auto flex max-w-7xl items-center justify-between px-4 py-4">

        <a href="#" class="text-xl font-bold">
            MyStore
        </a>

        <nav class="hidden items-center gap-6 md:flex">
            <a href="#">Home</a>
            <a href="#">Products</a>
            <a href="#">About</a>
            <a href="#">Contact</a>
        </nav>

        <button class="rounded-lg border px-4 py-2 md:hidden">
            Menu
        </button>

    </div>

</header>

در موبایل:

MyStore                       Menu

در دسکتاپ:

MyStore       Home Products About Contact

بررسی Utilityها

flex

برای چیدمان Header استفاده شده است.

items-center

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

justify-between

برای قرار دادن عناصر در دو طرف Container استفاده شده است.

hidden md:flex

Navigation را در موبایل مخفی و در اندازه‌های بزرگ‌تر نمایش می‌دهد.

md:hidden

دکمه Menu را از md به بعد مخفی می‌کند.

مرحله سوم — ساخت Hero Section

حالا یک Hero Section ایجاد می‌کنیم.

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

    <div class="mx-auto flex max-w-7xl flex-col gap-8 px-6 py-12 md:flex-row md:items-center md:py-20">

        <div class="flex-1">

            <span class="text-sm font-semibold text-blue-600">
                NEW COLLECTION
            </span>

            <h1 class="mt-3 text-3xl font-bold md:text-5xl">
                محصولات جدید را کشف کنید
            </h1>

            <p class="mt-4 text-gray-600 md:text-lg">
                جدیدترین محصولات فروشگاه را با طراحی مدرن و
                کیفیت مناسب مشاهده کنید.
            </p>

            <button class="mt-6 rounded-lg bg-blue-600 px-6 py-3 font-semibold text-white">
                مشاهده محصولات
            </button>

        </div>

        <div class="flex-1">

            <img
                src="hero.jpg"
                alt="New Collection"
                class="w-full rounded-2xl object-cover"
            >

        </div>

    </div>

</section>

در موبایل:

Title
Description
Button
Image

در دسکتاپ:

Title + Description + Button      Image

چرا از flex-col استفاده کردیم؟

چون حالت پایه برای موبایل است:

flex-col

سپس از md به بعد:

md:flex-row

Layout را دو ستونه می‌کنیم.

مرحله چهارم — Responsive Typography

در Hero از:

text-3xl md:text-5xl

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

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

همچنین:

md:text-lg

اندازه متن توضیح را در صفحه‌های بزرگ‌تر افزایش می‌دهد.

Responsive فقط مربوط به Layout نیست؛ Typography نیز باید با اندازه صفحه هماهنگ شود.

مرحله پنجم — ساخت بخش دسته‌بندی‌ها

حالا می‌خواهیم چهار دسته‌بندی ایجاد کنیم.

<section class="mx-auto max-w-7xl px-6 py-12">

    <div class="mb-8">
        <h2 class="text-2xl font-bold md:text-3xl">
            دسته‌بندی‌ها
        </h2>

        <p class="mt-2 text-gray-600">
            دسته‌بندی موردنظر خود را انتخاب کنید.
        </p>
    </div>

    <div class="grid grid-cols-2 gap-4 md:grid-cols-4">

        <a href="#" class="rounded-xl border p-5 text-center shadow-sm">
            Electronics
        </a>

        <a href="#" class="rounded-xl border p-5 text-center shadow-sm">
            Fashion
        </a>

        <a href="#" class="rounded-xl border p-5 text-center shadow-sm">
            Home
        </a>

        <a href="#" class="rounded-xl border p-5 text-center shadow-sm">
            Sports
        </a>

    </div>

</section>

در موبایل:

+-----------+-----------+
| Electronics| Fashion   |
+-----------+-----------+
| Home      | Sports    |
+-----------+-----------+

در دسکتاپ:

+-----------+-----------+-----------+-----------+
| Electronics| Fashion   | Home      | Sports    |
+-----------+-----------+-----------+-----------+

در اینجا:

grid-cols-2

حالت پایه را مشخص می‌کند.

و:

md:grid-cols-4

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

مرحله ششم — ساخت Product Grid

حالا بخش محصولات را می‌سازیم.

<section class="bg-gray-50">

    <div class="mx-auto max-w-7xl px-6 py-12">

        <div class="mb-8 flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">

            <div>
                <h2 class="text-2xl font-bold md:text-3xl">
                    محصولات جدید
                </h2>

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

            <a href="#" class="font-semibold text-blue-600">
                مشاهده همه
            </a>

        </div>

        <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">

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

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

                <div class="p-5">

                    <h3 class="text-lg font-bold">
                        Product 1
                    </h3>

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

                    <div class="mt-5 flex items-center justify-between">
                        <span class="font-bold">
                            $120
                        </span>

                        <button class="rounded-lg bg-blue-600 px-4 py-2 text-white">
                            خرید
                        </button>
                    </div>

                </div>

            </div>

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

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

                <div class="p-5">

                    <h3 class="text-lg font-bold">
                        Product 2
                    </h3>

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

                    <div class="mt-5 flex items-center justify-between">
                        <span class="font-bold">
                            $150
                        </span>

                        <button class="rounded-lg bg-blue-600 px-4 py-2 text-white">
                            خرید
                        </button>
                    </div>

                </div>

            </div>

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

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

                <div class="p-5">

                    <h3 class="text-lg font-bold">
                        Product 3
                    </h3>

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

                    <div class="mt-5 flex items-center justify-between">
                        <span class="font-bold">
                            $180
                        </span>

                        <button class="rounded-lg bg-blue-600 px-4 py-2 text-white">
                            خرید
                        </button>
                    </div>

                </div>

            </div>

        </div>

    </div>

</section>

بررسی Product Grid

در این قسمت از:

grid-cols-1 sm:grid-cols-2 lg:grid-cols-3

استفاده کرده‌ایم.

بنابراین:

Mobile
→ 1 column

Small screens
→ 2 columns

Large screens
→ 3 columns

این یکی از رایج‌ترین الگوهای Responsive برای نمایش محصولات است.

چرا از sm استفاده کردیم؟

قبلاً ممکن بود فقط از:

grid-cols-1 md:grid-cols-3

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

اما می‌توانیم Layout را دقیق‌تر کنیم:

grid-cols-1 sm:grid-cols-2 lg:grid-cols-3

در این حالت، صفحه در اندازه‌های مختلف مرحله‌به‌مرحله تغییر می‌کند.

البته همیشه لازم نیست از همه Breakpointها استفاده کنیم.

مرحله هفتم — ساخت CTA

CTA یا Call To Action بخشی است که کاربر را به انجام یک عمل مشخص دعوت می‌کند.

مثلاً:

<section class="mx-auto max-w-7xl px-6 py-12">

    <div class="rounded-2xl bg-blue-600 px-6 py-10 text-center text-white md:px-12">

        <h2 class="text-2xl font-bold md:text-3xl">
            آماده شروع هستید؟
        </h2>

        <p class="mx-auto mt-3 max-w-2xl text-blue-100">
            جدیدترین محصولات ما را مشاهده کنید و
            محصول موردنظر خود را انتخاب کنید.
        </p>

        <button class="mt-6 rounded-lg bg-white px-6 py-3 font-semibold text-blue-600">
            شروع کنید
        </button>

    </div>

</section>

در این بخش نیز Typography و Padding را Responsive کرده‌ایم:

px-6 md:px-12

و:

text-2xl md:text-3xl

مرحله هشتم — ساخت Footer Responsive

حالا Footer را اضافه می‌کنیم.

<footer class="bg-gray-900 text-white">

    <div class="mx-auto grid max-w-7xl grid-cols-1 gap-8 px-6 py-12 sm:grid-cols-2 lg:grid-cols-4">

        <div>
            <h3 class="text-lg font-bold">
                MyStore
            </h3>

            <p class="mt-3 text-gray-400">
                فروشگاه آنلاین با طراحی مدرن.
            </p>
        </div>

        <div>
            <h3 class="font-bold">
                Products
            </h3>

            <div class="mt-3 space-y-2 text-gray-400">
                <a href="#" class="block">Electronics</a>
                <a href="#" class="block">Fashion</a>
                <a href="#" class="block">Home</a>
            </div>
        </div>

        <div>
            <h3 class="font-bold">
                Company
            </h3>

            <div class="mt-3 space-y-2 text-gray-400">
                <a href="#" class="block">About</a>
                <a href="#" class="block">Contact</a>
                <a href="#" class="block">Support</a>
            </div>
        </div>

        <div>
            <h3 class="font-bold">
                Follow Us
            </h3>

            <div class="mt-3 flex gap-4 text-gray-400">
                <a href="#">Instagram</a>
                <a href="#">Twitter</a>
            </div>
        </div>

    </div>

</footer>

در موبایل:

MyStore

Products

Company

Follow Us

در دسکتاپ:

MyStore | Products | Company | Follow Us

چون از:

grid-cols-1 sm:grid-cols-2 lg:grid-cols-4

استفاده کرده‌ایم.

صفحه کامل

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

<body>

    <header>
        Header
    </header>

    <main>

        <section>
            Hero
        </section>

        <section>
            Categories
        </section>

        <section>
            Products
        </section>

        <section>
            CTA
        </section>

    </main>

    <footer>
        Footer
    </footer>

</body>

در یک پروژه واقعی، این بخش‌ها می‌توانند در فایل‌های جداگانه Component یا Template قرار بگیرند.

یک نکته مهم درباره Responsive Design

Responsive Design فقط به معنی کوچک کردن عناصر نیست.

باید در بعضی مواقع ساختار Layout را تغییر دهیم.

برای مثال:

Desktop

Image       Content

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

Mobile

Image
Content

یا:

Desktop

Menu Item 1 | Menu Item 2 | Menu Item 3

در موبایل:

Menu

بنابراین Responsive Design یعنی سازگار کردن تجربه کاربر با فضای موجود، نه فقط کاهش اندازه عناصر.

استفاده هوشمندانه از Breakpointها

لازم نیست برای هر Utility چندین Breakpoint تعریف کنیم.

مثلاً:

text-xl sm:text-2xl md:text-3xl lg:text-4xl xl:text-5xl

ممکن است برای یک عنوان بیش از حد پیچیده باشد.

گاهی این کد کافی است:

text-2xl md:text-4xl

قاعده ساده:

از کمترین تعداد Breakpoint لازم برای رسیدن به Layout مناسب استفاده کنید.

این کار باعث می‌شود کد Tailwind ساده‌تر و قابل نگهداری‌تر باشد.

استفاده از max-width برای جلوگیری از کشیدگی محتوا

در صفحات بزرگ، نباید متن‌ها بیش از حد کشیده شوند.

برای مثال:

<p class="max-w-2xl">
    این متن یک توضیح نسبتاً طولانی است که بهتر است
    در یک محدوده مناسب نمایش داده شود تا خواندن آن برای
    کاربر راحت‌تر باشد.
</p>

همچنین می‌توانیم Container اصلی را محدود کنیم:

<div class="mx-auto max-w-7xl px-6">
    ...
</div>

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

جلوگیری از مشکلات Responsive

هنگام ساخت صفحه Responsive موارد زیر را بررسی کنید.

تصاویر

از عرض مناسب استفاده کنید:

<img class="w-full object-cover" ...>

متن

متن‌های بسیار طولانی ممکن است Layout را خراب کنند.

دکمه‌ها

در موبایل باید فضای کافی برای لمس داشته باشند.

Grid

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

Flexbox

در صورت نیاز جهت Layout را تغییر دهید:

flex-col md:flex-row

Overflow

اگر محتوایی بیش از حد عریض است، باید رفتار Overflow آن را بررسی کنید.

تست Responsive

بعد از ساخت صفحه، حتماً آن را در اندازه‌های مختلف بررسی کنید.

حداقل این حالت‌ها را تست کنید:

Mobile
Tablet
Laptop
Desktop
Large Desktop

در مرورگر می‌توانید از Developer Tools استفاده کنید و عرض صفحه را تغییر دهید.

در هر اندازه بررسی کنید:

  • آیا محتوا از صفحه خارج شده است؟

  • آیا متن خوانا است؟

  • آیا دکمه‌ها قابل استفاده هستند؟

  • آیا تصاویر مناسب هستند؟

  • آیا Grid به درستی تغییر کرده است؟

  • آیا Header مناسب است؟

  • آیا Footer Layout مناسبی دارد؟

  • آیا Horizontal Scroll ناخواسته ایجاد شده است؟

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

۱. طراحی فقط برای Desktop

اگر ابتدا یک Layout بزرگ طراحی کنید و بعد بخواهید آن را برای موبایل اصلاح کنید، ممکن است مجبور شوید تغییرات زیادی انجام دهید.

بهتر است از ابتدا Mobile-First فکر کنید.

۲. استفاده زیاد از Fixed Width

کدهایی مانند:

w-[900px]

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

در بسیاری از Layoutها استفاده از:

w-full
max-w-*

مناسب‌تر است.

۳. Breakpointهای بیش از حد

استفاده از Breakpointهای زیاد بدون نیاز واقعی، کد را پیچیده می‌کند.

۴. نادیده گرفتن محتوای واقعی

Responsive Design باید با محتوای واقعی تست شود.

مثلاً یک عنوان کوتاه ممکن است کاملاً مناسب باشد، اما عنوان طولانی Layout را تغییر دهد.

تمرین عملی

حالا نوبت شماست که یک Landing Page Responsive بسازید.

صفحه باید شامل بخش‌های زیر باشد:

Header

در موبایل:

Logo                    Menu

در Desktop:

Logo          Navigation

Hero

در موبایل:

Title
Description
Button
Image

در Desktop:

Title + Description + Button       Image

Categories

در موبایل:

2 columns

در دسکتاپ:

4 columns

Products

در موبایل:

1 column

در Tablet:

2 columns

در Desktop:

3 columns

Footer

در موبایل:

1 column

در Tablet:

2 columns

در Desktop:

4 columns

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

جمع‌بندی

در این مقاله یک قدم عملی‌تر برداشتیم و دیدیم چگونه می‌توان یک صفحه Responsive واقعی با Tailwind CSS ایجاد کرد.

مفاهیم مختلف را با یکدیگر ترکیب کردیم:

Container
   +
Flexbox
   +
Grid
   +
Spacing
   +
Typography
   +
Breakpoints
   =
Responsive Page

یاد گرفتیم:

  • ابتدا Layout موبایل را طراحی کنیم.

  • با Breakpointها Layout را برای صفحات بزرگ‌تر تغییر دهیم.

  • از flex-col md:flex-row برای تغییر جهت Layout استفاده کنیم.

  • از grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 برای Product Grid استفاده کنیم.

  • Header را برای موبایل و دسکتاپ متفاوت طراحی کنیم.

  • Footer را به صورت Responsive ایجاد کنیم.

  • Typography و Spacing را نیز Responsive کنیم.

  • از max-w-* برای کنترل عرض محتوا استفاده کنیم.

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

اکنون شما ابزارهای اصلی لازم برای ساخت Layoutهای Responsive با Tailwind CSS را در اختیار دارید.

۰۰

نظرات

کد در دسترس نیست

هنوز نظری ثبت نشده است.