Tailwind CSS v4 چی داره

Tailwind CSS v4 چه چیز جدیدی دارد؟

نسخه‌ی ۴ تیلویند یک بازنویسی کامل از صفر است، نه یک آپدیت تدریجی. موتور جدیدش (با نام Oxide) اعداد چشمگیری نشان می‌دهد: بیلد کامل ۳.۷۸ برابر سریع‌تر (از ۳۷۸ میلی‌ثانیه به ۱۰۰ میلی‌ثانیه)، و rebuild افزایشی وقتی CSS جدیدی لازم نیست، تا ۱۸۲ برابر سریع‌تر — یعنی در حد میکروثانیه.

پیکربندی CSS-first

بزرگ‌ترین تغییر مفهومی، جابه‌جایی از tailwind.config.js به یک بلوک @theme مستقیم داخل CSS است:

@import "tailwindcss";

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

هر تعریفی که داخل @theme بگذارید، خودکار به یک CSS variable قابل‌استفاده در کل پروژه تبدیل می‌شود — این دقیقاً همان روشی است که رنگ‌ها و سایه‌های این سایت (--color-neon-violet, --shadow-glow-violet) تعریف شده‌اند.

نصب ساده‌تر

• فقط یک import: @import "tailwindcss" — دیگر نیازی به دایرکتیوهای جداگانه‌ی @tailwind نیست
• تشخیص خودکار فایل‌های محتوا، بدون نیاز به config دستی؛ .gitignore را هم رعایت می‌کند
• vendor prefixing به‌صورت built-in، از طریق Lightning CSS

قابلیت‌های جدید قابل توجه

• Container Queries به‌صورت built-in و بدون پلاگین (@container, @sm:)
• 3D transforms: rotate-x-*, rotate-y-*, scale-z-*, translate-z-*
• Utility های داینامیک: مقادیری مثل grid-cols-15 بدون نیاز به تعریف قبلی در کانفیگ کار می‌کنند — دقیقاً همان چیزی که باعث می‌شود کلاس‌هایی مثل w-104 یا aspect-2752/1536 توی این پروژه بدون هیچ تنظیم اضافه‌ای کار کنند.
• گرادیان‌های پیشرفته‌تر: conic/radial، حالت‌های interpolation، پشتیبانی از angle
• @starting-style: انیمیشن‌های enter/exit بدون جاوااسکریپت
• not-* variant برای نگیت کردن سلکتور یا مدیا کوئری

Logical Properties برای RTL

تیلویند ۴ از logical properties به‌صورت گسترده استفاده می‌کند، که پشتیبانی از راست‌به‌چپ را خیلی ساده‌تر می‌کند. برای پروژه‌ای مثل همین سایت که هم فارسی (RTL) و هم انگلیسی (LTR) دارد، این یعنی کلاس‌هایی مثل inset-s-*/inset-e-* به‌جای left/right فیزیکی — بدون نیاز به کلاس‌های شرطی جدا برای هر زبان.

رنگ‌ها روی OKLCH

پالت رنگی از rgb به oklch مهاجرت کرده که طیف رنگی وسیع‌تر و رنگ‌های پرجزئیات‌تری روی نمایشگرهای مدرن می‌دهد، در حالی که تعادل بصری با نسخه‌ی ۳ حفظ شده تا آپگرید نرم‌تر باشد.

جمع‌بندی

Tailwind v4 هم سریع‌تر است، هم پیکربندیش به CSS نزدیک‌تر شده، و هم قابلیت‌های مدرن CSS مثل container query و 3D transform را built-in دارد. برای پروژه‌های RTL/LTR ترکیبی، پشتیبانی گسترده‌تر از logical properties به‌تنهایی یک دلیل خوب برای آپگرید است.

منبع: Tailwind CSS — معرفی نسخه‌ی ۴