آشنایی با امکانات Tailwind CSS 4

Tailwind CSS یک فریم‌ورک CSS با رویکرد Utility-First است. به‌جای نوشتن یک کلاس CSS جداگانه برای هر عنصر، می‌توانیم با ترکیب کلاس‌های آماده، ظاهر و چیدمان رابط کاربری را مستقیماً در HTML یا JSX تعریف کنیم.

نسخه‌ی ۴ این فریم‌ورک تغییرات مهمی در شیوه‌ی پیکربندی، مدیریت رنگ‌ها، تعریف Design Tokenها و پردازش CSS ایجاد کرده است.

در این مقاله با مهم‌ترین قابلیت‌های Tailwind CSS 4 و چند نمونه‌ی کاربردی آشنا می‌شویم.

۱. پیکربندی با CSS به‌جای JavaScript

یکی از تغییرات مهم نسخه‌ی ۴، رویکرد CSS-first است. در بسیاری از پروژه‌ها می‌توانیم تنظیمات تم و مقادیر طراحی را مستقیماً در فایل CSS تعریف کنیم و برای این کار به فایل tailwind.config.js نیاز نداشته باشیم.

در نسخه‌ی ۳ معمولاً از دستورهای زیر استفاده می‌شد:

@tailwind base;
@tailwind components;
@tailwind utilities;

اما در نسخه‌ی ۴ نقطه‌ی ورود اصلی به این شکل است:

@import "tailwindcss";

این تغییر باعث ساده‌تر شدن فایل CSS اصلی پروژه می‌شود.

۲. تعریف Design Token با @theme

در Tailwind CSS 4 می‌توانیم مقادیر مشترک طراحی را با دستور @theme تعریف کنیم.

برای مثال:

@import "tailwindcss";

@theme {
  --color-brand: #2563eb;
  --color-brand-light: #dbeafe;
  --font-display: "IRANSans", sans-serif;
  --breakpoint-3xl: 120rem;
}

حالا می‌توانیم از مقادیر تعریف‌شده در کلاس‌های Tailwind استفاده کنیم:

<div className="bg-brand text-white">
  <h1 className="font-display text-3xl">
    سایت شخصی من
  </h1>
</div>

مزیت این روش آن است که مقادیر طراحی در یک محل مشخص قرار می‌گیرند و تغییر رنگ برند یا فونت پروژه ساده‌تر می‌شود.

نکته: متغیرهای تعریف‌شده در @theme با متغیرهای معمول CSS یکسان نیستند؛ Tailwind از آن‌ها برای ایجاد Utilityهای متناظر نیز استفاده می‌کند.

۳. تشخیص خودکار کلاس‌ها

در نسخه‌ی ۳ معمولاً باید مسیر فایل‌های پروژه را در بخش content فایل تنظیمات مشخص می‌کردیم.

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

برای مثال:

export default function Card() {
  return (
    <div className="rounded-xl border border-gray-200 p-6 shadow-sm">
      <h2 className="text-xl font-bold">
        پروژه‌ی من
      </h2>
    </div>
  );
}

Tailwind کلاس‌های استفاده‌شده در این کامپوننت را شناسایی می‌کند و CSS موردنیاز را تولید می‌کند.

اگر کلاس‌ها در فایل یا کتابخانه‌ای باشند که به‌صورت خودکار شناسایی نمی‌شود، می‌توانیم از دستور @source برای معرفی مسیر آن استفاده کنیم.

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

یکی از قابلیت‌های مفید Tailwind، امکان استفاده از مقادیر دلخواه است.

برای مثال:

<div className="w-[340px] rounded-[18px] p-[22px]">
  محتوای کارت
</div>

یا برای پس‌زمینه:

<section className="bg-[#101827] text-white">
  محتوای بخش
</section>

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

البته اگر مقداری در بخش‌های زیادی از پروژه تکرار شود، بهتر است آن را به‌عنوان یک Design Token تعریف کنیم.

۵. طراحی واکنش‌گرا

Tailwind از رویکرد Mobile-First برای طراحی واکنش‌گرا پشتیبانی می‌کند.

برای نمونه:

<div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
  <div>پروژه اول</div>
  <div>پروژه دوم</div>
  <div>پروژه سوم</div>
</div>

رفتار این کد به این صورت است:

• در اندازه‌های کوچک، یک ستون داریم.
• از breakpoint مربوط به md، دو ستون نمایش داده می‌شود.
• از breakpoint مربوط به lg، سه ستون نمایش داده می‌شود.

به این ترتیب، می‌توانیم بدون نوشتن چندین Media Query، چیدمان صفحه را برای اندازه‌های مختلف تنظیم کنیم.

۶. پشتیبانی از Container Queries

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

Container Queries این امکان را فراهم می‌کنند.

برای مثال:

<div class="@container">
  <div class="flex flex-col @md:flex-row">
    <div>تصویر</div>
    <div>توضیحات</div>
  </div>
</div>

در این مثال، چیدمان داخلی بر اساس اندازه‌ی Container تغییر می‌کند، نه صرفاً عرض صفحه‌ی مرورگر.

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

۷. مدیریت Dark Mode

Tailwind امکان تعریف استایل‌های مخصوص تم تاریک را با Variant مربوط به dark: فراهم می‌کند.

برای نمونه:

<div className="bg-white text-gray-900 dark:bg-gray-900 dark:text-white">
  محتوای صفحه
</div>

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

نحوه‌ی فعال شدن dark: به تنظیمات و استراتژی انتخاب تم بستگی دارد. در پروژه‌ای که تغییر تم را با JavaScript و ویژگی data-theme مدیریت می‌کند، باید Variant مربوط به Dark Mode را متناسب با همان ساختار تنظیم کنیم.

۸. Variantها و استایل بر اساس وضعیت عنصر

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

برای مثال:

<button className="rounded-lg bg-blue-600 px-5 py-3 text-white hover:bg-blue-700 focus-visible:outline-2 disabled:cursor-not-allowed disabled:opacity-50">
  ذخیره اطلاعات
</button>

در این نمونه:

• hover: برای وضعیت قرار گرفتن نشانگر روی دکمه است.
• focus-visible: برای وضعیت فوکوس قابل مشاهده کاربرد دارد.
• disabled: برای زمانی است که دکمه غیرفعال باشد.

همچنین در نسخه‌ی ۴ Variantهای بیشتری برای قابلیت‌های جدید CSS و شرایط مختلف در دسترس هستند.

۹. بهبود عملکرد و استفاده از قابلیت‌های جدید CSS

Tailwind CSS 4 با تکیه بر قابلیت‌های مدرن CSS و موتور پردازش جدید، تغییرات قابل توجهی در عملکرد و تجربه‌ی توسعه ایجاد کرده است.

از جمله قابلیت‌های مهم می‌توان به موارد زیر اشاره کرد:

• پشتیبانی داخلی از Import فایل‌های CSS
• پالت رنگ مدرن‌تر مبتنی بر قابلیت‌های جدید رنگ در CSS
• Utilityهای مربوط به Transform سه‌بعدی
• امکانات گسترده‌تر برای Gradientها
• پشتیبانی از @starting-style برای برخی انیمیشن‌های ورود
• Variantها و Utilityهای جدید برای ویژگی‌های مدرن CSS

البته سرعت واقعی Build به اندازه‌ی پروژه، ابزارهای مورد استفاده و ساختار فایل‌ها بستگی دارد.

۱۰. نکته‌های مهم هنگام استفاده از Tailwind CSS 4

با وجود قابلیت‌های جدید، هنگام کار با نسخه‌ی ۴ باید به چند نکته توجه کنیم:

• Tailwind CSS 4 به مرورگرهای مدرن‌تری نسبت به نسخه‌ی ۳ نیاز دارد.
• روش پیکربندی و برخی Utilityها نسبت به نسخه‌ی ۳ تغییر کرده‌اند.
• ساختن نام کلاس‌ها به‌صورت پویا با اتصال رشته‌ها ممکن است باعث شناسایی نشدن آن‌ها شود.
• مقادیر تکرارشونده بهتر است در قالب Design Token تعریف شوند.
• برای مدیریت تم تاریک، باید روش انتخاب تم و ساختار متغیرهای CSS از ابتدا مشخص باشد.

جمع‌بندی

Tailwind CSS 4 علاوه بر Utilityهای همیشگی، رویکرد ساده‌تر و CSSمحورتری برای پیکربندی ارائه می‌دهد. تشخیص خودکار کلاس‌ها، تعریف Design Token با @theme، Container Queries و پشتیبانی گسترده‌تر از قابلیت‌های مدرن CSS از مهم‌ترین امکانات آن هستند.

در پروژه‌ی شخصی من، استفاده از این قابلیت‌ها می‌تواند به ساخت یک Design System منظم، مدیریت بهتر رنگ‌ها و فونت‌ها و پیاده‌سازی آسان‌تر تم روشن و تاریک کمک کند.

برای مطالعه‌ی جزئیات بیشتر، مستندات رسمی Tailwind CSS منبع مناسبی است:

https://tailwindcss.com/docs