طراحی رابط کاربری ریسپانسیو با Tailwind CSS 4

Tailwind CSS 4؛ سریع‌تر، ساده‌تر و نزدیک‌تر به CSS

Tailwind CSS در چند سال اخیر به یکی از محبوب‌ترین ابزارهای طراحی رابط کاربری تبدیل شده است. نسخه‌ی ۴ این فریم‌ورک با یک موتور کاملاً بازنویسی‌شده، بیلدهایی تا چند برابر سریع‌تر و پیکربندی مبتنی بر خود CSS منتشر شد. در این مقاله با تغییرات مهم این نسخه آشنا می‌شویم و یک رابط کاربری ریسپانسیو و راست‌چین می‌سازیم.

خداحافظی با tailwind.config.js

بزرگ‌ترین تغییر نسخه‌ی ۴، انتقال تنظیمات به داخل فایل CSS است. دیگر نیازی به فایل پیکربندی جاوااسکریپتی نیست و متغیرهای طراحی مستقیماً با @theme تعریف می‌شوند:

@import "tailwindcss";

@theme {
  --font-sans: "Iran Yekan", system-ui, sans-serif;
  --color-brand-500: oklch(0.62 0.19 259);
  --color-brand-600: oklch(0.55 0.2 259);
  --breakpoint-3xl: 112rem;
}

هر متغیری که اینجا تعریف کنید، هم به‌صورت کلاس (مثل bg-brand-500) و هم به‌صورت متغیر CSS در دسترس است. همچنین Tailwind 4 فایل‌های پروژه را خودکار تشخیص می‌دهد و نیازی به تعریف مسیر content نیست.

طراحی Mobile First

در Tailwind، کلاس‌های بدون پیشوند برای همه‌ی اندازه‌ها اعمال می‌شوند و پیشوندهایی مثل md: و lg: از آن اندازه به بالا. بنابراین همیشه ابتدا طراحی موبایل را بنویسید و سپس برای صفحه‌های بزرگ‌تر آن را گسترش دهید:

<section class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
  <article class="rounded-2xl bg-white p-5 shadow-sm dark:bg-zinc-900">
    <h3 class="text-base font-bold md:text-lg">عنوان کارت</h3>
    <p class="mt-2 text-sm/7 text-zinc-600 dark:text-zinc-400">
      توضیحات کوتاه درباره‌ی محتوای کارت.
    </p>
  </article>
</section>

Container Queries؛ ریسپانسیو بر اساس والد

گاهی یک کامپوننت باید بر اساس عرض ظرف خودش تغییر کند، نه عرض کل صفحه. Tailwind 4 از Container Queries به‌صورت پیش‌فرض پشتیبانی می‌کند:

<div class="@container">
  <div class="flex flex-col gap-3 @md:flex-row @md:items-center">
    <img class="w-full rounded-xl @md:w-40" src="/cover.webp" alt="" />
    <p class="text-sm">این کارت در ستون کناری عمودی و در بخش اصلی افقی است.</p>
  </div>
</div>

این قابلیت ساخت کامپوننت‌های واقعاً قابل‌استفاده‌ی مجدد را بسیار ساده‌تر می‌کند.

راست‌چین کردن بدون دردسر

برای وب‌سایت‌های فارسی، به‌جای ml و mr از کلاس‌های منطقی ms (margin-start) و me (margin-end) استفاده کنید. این کلاس‌ها خودکار با جهت dir="rtl" هماهنگ می‌شوند و اگر روزی نسخه‌ی انگلیسی سایت را هم بسازید، نیازی به بازنویسی استایل‌ها نخواهید داشت. همین قاعده برای ps/pe، start/end و text-start هم صدق می‌کند.

حالت تاریک با یک خط

برای اینکه حالت تاریک به‌جای تنظیمات سیستم‌عامل با یک کلاس یا attribute کنترل شود، کافی است یک variant سفارشی تعریف کنید:

@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));

حالا با تغییر data-theme روی تگ html، تمام کلاس‌های dark: فعال یا غیرفعال می‌شوند.

نکات حرفه‌ای برای کدی تمیزتر

• کامپوننت بسازید، نه کلاس: به‌جای @apply زیاد، تکرارها را در کامپوننت‌های React یا Vue خلاصه کنید.
• فضای سفید را جدی بگیرید: مقیاس فاصله‌گذاری Tailwind را ثابت نگه دارید تا صفحه منظم دیده شود.
• از افزونه‌ی Prettier استفاده کنید: prettier-plugin-tailwindcss ترتیب کلاس‌ها را یکسان می‌کند.
• رنگ‌ها را معنایی نام‌گذاری کنید: نام‌هایی مثل primary و danger نگهداری تم را ساده‌تر می‌کنند.

جمع‌بندی

Tailwind CSS 4 با پیکربندی مبتنی بر CSS، سرعت بالاتر و قابلیت‌هایی مثل Container Queries، ساخت رابط‌های کاربری ریسپانسیو را از همیشه لذت‌بخش‌تر کرده است. اگر هنوز از نسخه‌ی ۳ استفاده می‌کنید، ابزار رسمی مهاجرت بیشتر کارها را خودکار انجام می‌دهد؛ ارزش امتحان کردن را دارد.