BenoService

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

Responsive Design و Breakpointها در Tailwind CSS

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

امروزه کاربران یک وب‌سایت را فقط با کامپیوتر مشاهده نمی‌کنند؛ موبایل، تبلت، لپ‌تاپ و مانیتورهای بزرگ همگی می‌توانند برای مشاهده یک صفحه وب استفاده شوند. به همین دلیل یک وب‌سایت حرفه‌ای باید بتواند در اندازه‌های مختلف صفحه نمایش، ظاهر و چیدمان مناسبی داشته باشد. به این مفهوم Responsive Design یا طراحی واکنش‌گرا گفته می‌شود. Tailwind CSS یکی از ابزارهای بسیار مناسب برای ساخت صفحات Responsive است، زیرا می‌توانیم برای هر اندازه صفحه، Utilityهای متفاوتی را به صورت مستقیم روی عناصر قرار دهیم. در این مقاله ابتدا مفهوم Responsive Design را یاد می‌گیریم و سپس با Breakpointهای Tailwind CSS کار می‌کنیم.

Responsive Design چیست؟

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

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

+----------+----------+----------+----------+
| Product  | Product  | Product  | Product  |
+----------+----------+----------+----------+

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

+------------------+
|     Product      |
+------------------+

+------------------+
|     Product      |
+------------------+

یعنی Layout با توجه به اندازه صفحه تغییر کند.

چرا Responsive Design مهم است؟

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

  • متن بیش از حد کوچک یا بزرگ باشد.

  • دکمه‌ها فضای مناسبی نداشته باشند.

  • عناصر از صفحه خارج شوند.

  • جدول‌ها یا تصاویر باعث ایجاد Scroll ناخواسته شوند.

  • منو فضای زیادی اشغال کند.

  • کارت‌ها بیش از حد فشرده شوند.

بنابراین Responsive Design یکی از مهارت‌های ضروری در طراحی رابط کاربری است.

Responsive Design در Tailwind CSS

Tailwind CSS از یک سیستم Mobile-First برای Responsive Design استفاده می‌کند.

این موضوع بسیار مهم است.

در Tailwind معمولاً ابتدا ظاهر پایه را برای صفحه‌های کوچک تعریف می‌کنیم و سپس با Breakpointها، ظاهر صفحه را در اندازه‌های بزرگ‌تر تغییر می‌دهیم.

مثلاً:

<div class="text-center md:text-left">
    Hello
</div>

در این مثال:

text-center

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

و:

md:text-left

می‌گوید از Breakpoint مربوط به md به بعد، متن چپ‌چین شود.

در Tailwind، Utility بدون Prefix حالت پایه را تعیین می‌کند و Prefixهایی مانند sm:، md:، lg: و ... تغییرات مربوط به اندازه‌های بزرگ‌تر را مشخص می‌کنند.

Breakpoint چیست؟

Breakpoint یک نقطه یا محدوده در عرض صفحه است که از آن به بعد می‌توانیم ظاهر یک عنصر را تغییر دهیم.

Tailwind CSS Breakpointهای استانداردی دارد که به صورت Prefix استفاده می‌شوند.

نمونه:

sm:
md:
lg:
xl:
2xl:

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

Breakpointهای پیش‌فرض Tailwind CSS

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

Prefix

حداقل عرض

sm:

640px

md:

768px

lg:

1024px

xl:

1280px

2xl:

1536px

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

یعنی مثلاً:

md:text-left

یعنی از عرض 768px به بالا، این Utility اعمال شود.

Mobile-First یعنی چه؟

فرض کنید می‌خواهیم متن در موبایل وسط‌چین باشد و در دسکتاپ چپ‌چین شود.

روش Mobile-First:

<h1 class="text-center md:text-left">
    Welcome
</h1>

در موبایل:

       Welcome

و در اندازه md و بزرگ‌تر:

Welcome

ابتدا حالت کوچک را تعریف کرده‌ایم و سپس حالت بزرگ‌تر را اضافه کرده‌ایم.

تغییر اندازه متن در Breakpointهای مختلف

یکی از رایج‌ترین کاربردهای Responsive Utilityها، تغییر اندازه Typography است.

مثلاً:

<h1 class="text-2xl md:text-4xl lg:text-5xl">
    Welcome
</h1>

در این مثال:

Mobile → text-2xl
Tablet → text-4xl
Desktop → text-5xl

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

تغییر Padding به صورت Responsive

می‌توانیم Spacing را نیز Responsive کنیم.

مثال:

<div class="p-4 md:p-8 lg:p-12">
    Content
</div>

یعنی:

  • در صفحه کوچک → p-4

  • از md → p-8

  • از lg → p-12

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

تغییر فاصله بین عناصر

مثلاً:

<div class="flex gap-2 md:gap-4 lg:gap-8">
    ...
</div>

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

Responsive Grid

یکی از مهم‌ترین کاربردهای Breakpointها، تغییر تعداد ستون‌های Grid است.

فرض کنید می‌خواهیم:

  • موبایل → یک ستون

  • تبلت → دو ستون

  • دسکتاپ → سه ستون

داشته باشیم.

کد:

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

    <div class="rounded-xl border p-5">
        Product 1
    </div>

    <div class="rounded-xl border p-5">
        Product 2
    </div>

    <div class="rounded-xl border p-5">
        Product 3
    </div>

    <div class="rounded-xl border p-5">
        Product 4
    </div>

</div>

ساختار:

Mobile

+----------+
| Product  |
+----------+
| Product  |
+----------+
| Product  |
+----------+


Tablet

+----------+----------+
| Product  | Product  |
+----------+----------+
| Product  | Product  |
+----------+----------+


Desktop

+----------+----------+----------+
| Product  | Product  | Product  |
+----------+----------+----------+
| Product  | Product  |          |
+----------+----------+----------+

این یکی از مهم‌ترین الگوهای Responsive در پروژه‌های واقعی است.

Responsive Flexbox

می‌توانیم جهت Flexbox را نیز تغییر دهیم.

مثلاً در موبایل:

Image
Content

و در دسکتاپ:

Image    Content

کد:

<div class="flex flex-col gap-6 md:flex-row">

    <div>
        <img
            src="product.jpg"
            alt="Product"
            class="h-64 w-full rounded-xl object-cover"
        >
    </div>

    <div>
        <h2 class="text-2xl font-bold">
            Product Name
        </h2>

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

</div>

در اینجا:

flex-col

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

و:

md:flex-row

از md به بعد جهت را به Row تغییر می‌دهد.

تغییر Display با Breakpoint

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

مثلاً:

<div class="block md:hidden">
    Mobile Menu
</div>

در این مثال:

block

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

و:

md:hidden

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

بنابراین:

Mobile
→ Mobile Menu visible

Desktop
→ Mobile Menu hidden

نمایش عنصر فقط در اندازه‌های بزرگ‌تر

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

<div class="hidden md:block">
    Desktop Content
</div>

در موبایل:

Hidden

و از md به بعد:

Visible

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

Responsive Width

می‌توانیم عرض عناصر را نیز در Breakpointهای مختلف تغییر دهیم.

مثال:

<div class="w-full md:w-1/2 lg:w-1/3">
    Content
</div>

یعنی:

Mobile  → 100%
Tablet  → 50%
Desktop → حدود 33%

این روش برای ساخت Layoutهای چندبخشی بسیار کاربردی است.

Responsive Height

Height نیز می‌تواند Responsive باشد.

<div class="h-48 md:h-64 lg:h-96">
    Content
</div>

در این مثال ارتفاع عنصر در اندازه‌های مختلف تغییر می‌کند.

Responsive Position

حتی Position را نیز می‌توان با Breakpointها تغییر داد.

مثال:

<div class="absolute right-2 top-2 md:right-6 md:top-6">
    Badge
</div>

در صفحه کوچک Badge نزدیک‌تر به گوشه قرار می‌گیرد و در صفحه بزرگ‌تر فاصله آن بیشتر می‌شود.

ترکیب چند Breakpoint

می‌توانیم چند Breakpoint را هم‌زمان استفاده کنیم.

مثال:

<h1 class="text-xl sm:text-2xl md:text-3xl lg:text-5xl">
    Tailwind CSS
</h1>

یعنی:

Base → text-xl
sm   → text-2xl
md   → text-3xl
lg   → text-5xl

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

Breakpoint فقط برای یک Property نیست

یکی از نکات مهم این است که Breakpointها را می‌توان برای Utilityهای مختلف استفاده کرد.

برای مثال:

<div class="
    grid
    grid-cols-1
    gap-4
    p-4
    md:grid-cols-2
    md:gap-6
    md:p-8
    lg:grid-cols-3
">

در اینجا هم‌زمان:

  • تعداد ستون‌ها

  • فاصله

  • Padding

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

ساخت یک کارت Responsive

حالا یک مثال کاربردی ایجاد کنیم.

<div class="flex flex-col overflow-hidden rounded-xl border bg-white shadow md:flex-row">

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

    <div class="flex flex-1 flex-col p-5">

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

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

        <div class="mt-5 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">

            <span class="font-bold">
                ۵۰,۰۰۰,۰۰۰ تومان
            </span>

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

        </div>

    </div>

</div>

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

+------------------+
|      Image       |
+------------------+
|      Title       |
|   Description    |
|      Price       |
|      Button      |
+------------------+

اما در اندازه بزرگ‌تر:

+----------+----------------------+
|          | Title                |
|  Image   | Description          |
|          | Price       Button   |
+----------+----------------------+

این دقیقاً یکی از کاربردهای واقعی Responsive Design است.

ساخت Responsive Header

Header یکی از بخش‌هایی است که معمولاً به Responsive Design نیاز دارد.

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

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

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

        <div class="text-xl font-bold">
            My Website
        </div>

        <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>

در این مثال:

hidden md:flex

باعث می‌شود Navigation در صفحه‌های کوچک مخفی باشد و از md به بعد نمایش داده شود.

و:

md:hidden

باعث می‌شود Button مربوط به Menu در صفحه‌های بزرگ مخفی شود.

ساختار مفهومی:

Mobile

Logo                         Menu


Desktop

Logo             Navigation

البته در یک پروژه واقعی، Button مربوط به Menu باید با JavaScript یا یک Framework به منوی موبایل متصل شود.

Mobile-First یک مثال کامل

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

در موبایل:

Title
Description
Image
Button

در دسکتاپ:

Title + Description + Button       Image

کد:

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

    <div class="flex flex-col gap-8 md:flex-row md:items-center">

        <div class="flex-1">

            <h1 class="text-3xl font-bold md:text-5xl">
                ساخت وب‌سایت مدرن
            </h1>

            <p class="mt-4 text-gray-600 md:text-lg">
                با Tailwind CSS می‌توانید رابط‌های کاربری
                مدرن و Responsive ایجاد کنید.
            </p>

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

        </div>

        <div class="flex-1">
            <img
                src="hero.jpg"
                alt="Modern Website"
                class="w-full rounded-2xl object-cover"
            >
        </div>

    </div>

</section>

در اینجا Layout از ابتدا برای صفحه کوچک طراحی شده و سپس از md به بعد به حالت دو ستونه تغییر می‌کند.

ترتیب فکری مناسب برای Responsive Design

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

مرحله اول: موبایل چه شکلی باشد؟

مثلاً:

One Column

مرحله دوم: در تبلت چه تغییری لازم است؟

مثلاً:

Two Columns

مرحله سوم: در دسکتاپ چه تغییری لازم است؟

مثلاً:

Three Columns

سپس Utilityها را به شکل Mobile-First می‌نویسیم:

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

این روش باعث می‌شود ساختار Responsive صفحه منظم‌تر باشد.

اشتباهات رایج در Responsive Design

اشتباه اول: طراحی فقط برای Desktop

گاهی ابتدا تمام صفحه برای Desktop طراحی می‌شود و بعد تلاش می‌کنیم آن را برای موبایل اصلاح کنیم.

در Tailwind بهتر است از ابتدا با رویکرد Mobile-First کار کنیم.

اشتباه دوم: استفاده بیش از حد از Breakpointها

مثلاً چنین کدی:

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

همیشه لازم نیست.

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

اشتباه سوم: ایجاد Horizontal Scroll ناخواسته

اگر یک عنصر عرض زیادی داشته باشد، ممکن است صفحه در موبایل به صورت افقی Scroll شود.

باید همیشه Layout را در اندازه‌های کوچک بررسی کنیم.

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

استفاده از:

hidden md:block

باید با دقت انجام شود.

اگر محتوایی برای کاربر ضروری است، نباید صرفاً برای ساده‌تر شدن Layout موبایل آن را بدون جایگزین مخفی کنیم.

چگونه Responsive بودن صفحه را تست کنیم؟

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

می‌توانید در مرورگر:

  1. Developer Tools را باز کنید.

  2. حالت Device یا Responsive را فعال کنید.

  3. عرض صفحه را تغییر دهید.

  4. Layout را در اندازه‌های مختلف بررسی کنید.

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

  • متن‌ها خوانا هستند؟

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

  • تصاویر از صفحه خارج نشده‌اند؟

  • Grid درست تغییر می‌کند؟

  • Navigation مناسب است؟

  • Horizontal Scroll ناخواسته وجود ندارد؟

تمرین عملی

یک صفحه فروشگاهی Responsive بسازید که شامل موارد زیر باشد:

Header

در موبایل:

Logo                    Menu

در Desktop:

Logo              Navigation

Product Grid

در موبایل:

1 column

در Tablet:

2 columns

در Desktop:

3 columns

برای این بخش از:

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

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

Product Card

داخل هر کارت:

  • تصویر

  • عنوان

  • توضیح

  • قیمت

  • Button

قرار دهید.

Hero Section

در موبایل:

Content
Image

در Desktop:

Content        Image

برای این بخش از:

flex flex-col md:flex-row

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

جمع‌بندی

در این مقاله با Responsive Design و Breakpointهای Tailwind CSS آشنا شدیم.

یاد گرفتیم که Responsive Design یعنی طراحی صفحه به شکلی که در اندازه‌های مختلف نمایشگر عملکرد و ظاهر مناسبی داشته باشد.

با Breakpointهای اصلی Tailwind آشنا شدیم:

sm:   → 640px
md:   → 768px
lg:   → 1024px
xl:   → 1280px
2xl:  → 1536px

همچنین یاد گرفتیم:

  • Tailwind از رویکرد Mobile-First استفاده می‌کند.

  • Utility بدون Prefix حالت پایه را مشخص می‌کند.

  • md:، lg: و سایر Prefixها تغییرات مربوط به عرض‌های بزرگ‌تر را مشخص می‌کنند.

  • می‌توان تعداد ستون‌های Grid را Responsive کرد.

  • می‌توان جهت Flexbox را در Breakpointهای مختلف تغییر داد.

  • می‌توان اندازه متن، فاصله، Padding، Width و Height را Responsive کرد.

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

  • Responsive Design باید از ابتدا بخشی از طراحی صفحه باشد.

۰۰

نظرات

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

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