ویژگی های جدید tailwindcss v4

Tailwind CSS v4.0 در ۲۲ ژانویه‌ی ۲۰۲۵ منتشر شد و مجموعه‌ای از ویژگی‌های جدید و بهبودهای کارایی را با خود آورد. در ادامه مهم‌ترین قابلیت‌ها را همراه با مثال و توضیح مرور می‌کنیم.

۱. موتور عملکرد بالا

• بازنویسی کامل هستهٔ فریم‌ورک برای حداکثر سرعت
• ساخت‌های کامل (full builds) تا ۳.۷۸× سریع‌تر و بازسازی تدریجی (incremental rebuilds) تا ۱۸۲× سریع‌تر از نسخهٔ قبلی هستند.
• جدول میانگین زمان‌ها (Median build times): نوع بازسازی v3.4 v4.0 نسبت به v3.4 Full build 378ms 100ms 3.78× Incremental (کد جدید) 44ms 5ms 8.8× Incremental (بدون کد جدید) 35ms 0.192ms 182×

۲. طراحی برای وب مدرن

با استفاده از قابلیت‌های جدید CSS نظیر cascade layers، @property، color-mix() و logical properties (برای پشتیبانی بهتر از RTL).

@layer theme, base, components, utilities;

@layer utilities {
  /* مثال: تعریف نامحدود فاصله با متغیر */
  .mx-6 {
    margin-inline: calc(var(--spacing) * 6);
  }
  /* مثال: ترکیب رنگ با color-mix */
  .bg-blue-500/50 {
    background-color: color-mix(in oklab, var(--color-blue-500) 50%, transparent);
  }
}

/* ثبت متغیر برای انیمیشن گرادیانت */
@property --tw-gradient-from {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}

۳. نصب ساده

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

1. نصب بسته‌ها npm install tailwindcss @tailwindcss/postcss
2. فعال‌سازی پلاگین در PostCSS // postcss.config.js export default { plugins: ["@tailwindcss/postcss"], };
3. وارد کردن Tailwind در CSS @import "tailwindcss";

• بدون نیاز به فایل پیکربندی یا خطوط @tailwind متعدد

۴. پلاگین رسمی Vite

برای پروژه‌های Vite، افزونهٔ اختصاصی با عملکرد حتی بهتر:

// vite.config.ts
import { defineConfig } from "vite";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
});

۵. تشخیص خودکار محتوا

– بدون نیاز به آرایهٔ content در پیکربندی
– تشخیص خودکار تمام فایل‌های قالب با نادیده‌گرفتن مسیرهای .gitignore و فایل‌های باینری
– در صورت نیاز می‌توانید با دستور @source در CSS منبع جدید اضافه کنید:

@import "tailwindcss";
@source "../node_modules/@my-company/ui-lib";

۶. پشتیبانی توکار از @import

– دیگر نیازی به postcss-import نیست
– سریع‌تر و بهینه‌تر با موتور جدید

// postcss.config.js
export default {
  plugins: [
    "postcss-import",
    "@tailwindcss/postcss",
  ],
};

۷. پیکربندی CSS-محور (@theme)

– به جای فایل JS، همهٔ تنظیمات را در خود CSS بنویسید
– تعریف design tokens، سفارشی‌سازی فونت‌ها و شکست‌های ریسپانسیو مستقیم در CSS :

@import "tailwindcss";

@theme {
  --font-display: "Satoshi", sans-serif;
  --breakpoint-3xl: 1920px;
  --color-avocado-500: oklch(0.84 0.18 117.33);
  --ease-snappy: cubic-bezier(0.2, 0, 0, 1);
}

۸. متغیرهای تم به‌صورت خودکار (CSS Theme Variables)

تمام design tokens شما به‌عنوان متغیرهای CSS خروجی می‌شوند و می‌توانید در هر جایی به‌صورت پویا استفاده کنید:

:root {
  --color-avocado-100: oklch(0.99 0 0);
  --color-avocado-200: oklch(0.98 0.04 113.22);
  /* ... */
}

۹. مقادیر پویا و واریانت‌های خودکار

– بدون نیاز به مقداردهی دستی در پیکربندی
– مثال: ستون‌بندی دلخواه، واریانت بر اساس صفت داده (data-*)، فاصلهٔ پویا

<!-- ستون ۱۵ تایی -->
<div class="grid grid-cols-15">…</div>

<!-- تغییر شفافیت وقتی data-current فعال است -->
<div data-current class="opacity-75 data-current:opacity-100">…</div>

/* فاصلهٔ پویا بر اساس متغیر spacing */
@layer utilities {
  .mt-8 { margin-top: calc(var(--spacing) * 8); }
  .w-17 { width:     calc(var(--spacing) * 17); }
}

۱۰. پالت رنگ P3 مدرن

– مهاجرت از sRGB به oklch برای رنگ‌های زنده‌تر
– حفظ توازن رنگ‌ها بدون ایجاد تغییر شکسته در پروژه‌های موجود

۱۱. Container Queries

– پشتیبانی داخلی بدون نیاز به پلاگین جداگانه
– واریانت‌های @min-* و @max-* برای تعریف بازه‌های اندازهٔ کانتینر:

<div class="@container">
  <div class="grid grid-cols-1 @sm:grid-cols-3 @lg:grid-cols-4">…</div>
</div>

۱۲. ۳D Transform Utilities

– کلاس‌هایی مثل rotate-x-*، translate-z-* و … برای ترنسفورم سه‌بعدی در HTML:

<div class="perspective-distant">
  <article class="transform-3d rotate-x-45 rotate-z-30">…</article>
</div>

۱۳. APIهای گرادیانت پیشرفته

• زاویه‌دار کردن گرادیانت (bg-linear-45)
• مدل‌های مختلف تفکیک رنگ (/srgb، /oklch)
• گرادیانت‌های کانیک و رادیال (bg-conic-*، bg-radial-*) :

<div class="bg-linear-45 from-indigo-500 via-purple-500 to-pink-500"></div>
<div class="bg-linear-to-r/oklch from-indigo-500 to-teal-400"></div>
<div class="bg-conic/[at_50%_50%] from-red-600 to-yellow-300"></div>

۱۴. واریانت‌های جدید و سایر بهبودها

• @starting-style: برای حالت‌های ورود/خروج انیمیشن
• not-*: اعمال استایل وقتی یک واریانت یا کوئری برقرار نیست
• پشتیبانی از color-scheme، field-sizing، سایه‌های پیچیده، inert و…