دایرکتیوها در Tailwind CSS v4: راهنمای کامل استفاده از Directives

نسخه چهارم Tailwind CSS تغییرات مهمی را در نحوه پیکربندی و توسعه استایل‌ها ارائه کرده است. یکی از بخش‌های مهم این نسخه، دایرکتیوها (Directives) هستند که به توسعه‌دهندگان امکان می‌دهند از قابلیت‌های پیشرفته Tailwind در فایل‌های CSS استفاده کنند.

دایرکتیو (Directive) چیست؟

دایرکتیوها دستورات ویژه‌ای هستند که توسط Tailwind CSS پردازش می‌شوند و امکاناتی مانند وارد کردن فریمورک، تعریف تم، ایجاد ابزارهای سفارشی و مدیریت واریانت‌ها را فراهم می‌کنند.

مهم‌ترین دایرکتیوهای Tailwind CSS v4

1. @import

در نسخه 4، به جای استفاده از دایرکتیوهای قدیمی Tailwind، تنها کافی است فایل اصلی Tailwind را وارد کنید:

@import "tailwindcss";

این دستور تمام قابلیت‌ها و ابزارهای Tailwind را در پروژه شما بارگذاری می‌کند.

2. @theme

دایرکتیو @themeبرای تعریف متغیرهای طراحی (Design Tokens) استفاده می‌شود.

@theme {
  --color-primary: #3b82f6;
  --color-secondary: #8b5cf6;
}

این متغیرها در سراسر پروژه قابل استفاده هستند و مدیریت سیستم طراحی را ساده‌تر می‌کنند.

3. @utility

با استفاده از @utility می‌توانید کلاس‌های کاربردی سفارشی ایجاد کنید.

@utility flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

با استاده از آن میتوانید کلاس هایی با قابلیت استفاده مجدد ایجاد کنید flex-center.

4. @variant

این دایرکتیو برای اعمال استایل‌ها در واریانت‌های مختلف مانند Hover، @variant و سایر حالت‌ها کاربرد دارد.

.button {
  @variant hover {
    opacity: 0.8;
  }
}

5. @custom-variant

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

@custom-variant theme-dark (&:where(.dark *));

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

مزایای دایرکتیوهای جدید در Tailwind CSS v4

• ساختار ساده‌تر و مدرن‌تر
• مدیریت بهتر Design Tokens
• کاهش وابستگی به فایل پیکربندی JavaScript
• توسعه آسان Utilityهای سفارشی
• بهبود عملکرد و خوانایی کد

تفاوت Tailwind CSS v4 با نسخه‌های قبلی

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

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

اما در Tailwind CSS v4 این ساختار با یک دستور ساده جایگزین شده است:

@import "tailwindcss";

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

نتیجه‌گیری

دایرکتیوهای جدید در Tailwind CSS v4 رویکرد مدرن‌تری برای مدیریت استایل‌ها ارائه می‌دهند. با استفاده از@theme، @utility، @variant و@custom-variantمی‌توانید سیستم‌های طراحی مقیاس‌پذیر و پروژه‌های حرفه‌ای‌تری ایجاد کنید.