‏Tailwind CSS v4.2 و v4.3: همه چیز در یک پست!

تیم Tailwind CSS این بار با یک پست دو نسخه را پوشش داد — چون ظاهراً وقتی v4.2 رو شیپ کردن، یادشون رفت براش بلاگ بنویسن! هر دو نسخه قابلیت‌های جالبی دارن که از همکاری با تیم‌های Netflix و Vercel هم بهره بردن.

v4.2: چی اضافه شد؟

چهار پالت رنگی جدید mauve، olive، mist، و taupe به تم پیش‌فرض اضافه شدن. اینا نسخه‌های کمی شخصیت‌دارتر رنگ‌های خاکستری هستن — یکی گرم‌تر، یکی سردتر، یکی با تُن سبز — و برای طراحی‌هایی که از gray معمولی خسته شدن عالی‌ان.

یه پلاگین اختصاصی برای webpack هم اضافه شده (@tailwindcss/webpack) که دیگه نیازی به دور زدن از طریق PostCSS نداره. نتیجه؟ در تست روی مستندات tailwindcss.com با Next.js و Turbopack، زمان build از ۹۳۲ms به ۴۲۹ms رسید — یعنی بیش از ۲ برابر سریع‌تر. چون Turbopack از webpack loaderها پشتیبانی می‌کنه، این بهبود برای Next.js هم به کار میاد.

یوتیلیتی‌های logical property هم گسترش پیدا کردن. این‌ها کلاس‌هایی هستن که با توجه به جهت نوشتار (مثلاً RTL یا LTR) اندازه‌ها و فاصله‌ها رو تنظیم می‌کنن. کلاس‌هایی مثل mbs-6، pbs-4، block-64، inline-full، و inset-bs-2 حالا موجودن. همچنین start-* و end-* قدیمی deprecate شدن و جاشون رو به inset-s-* و inset-e-* دادن.

<div class="mbs-6 mbe-2 pbs-4 pbe-8 ...">
  <!-- ... -->
</div>

یوتیلیتی font-features-* هم برای کنترل font-feature-settings اضافه شده. هر وقت نیاز داشتی یه ویژگی OpenType خاص فونتت رو فعال کنی که Tailwind براش کلاس آماده نداره، این escape hatch مرتبه.

v4.3: چی اضافه شد؟

استایل‌دهی اسکرول‌بار حالا اول‌درجه‌ست! با scrollbar-thin، scrollbar-none، scrollbar-auto می‌تونی عرض اسکرول‌بار رو کنترل کنی. رنگ thumb و track هم با scrollbar-thumb-* و scrollbar-track-* قابل تنظیمه و با opacity modifier هم کار می‌کنه:

<div class="scrollbar-thumb-slate-900/60 scrollbar-track-slate-900/10 ...">
  <!-- ... -->
</div>

@container-size هم اضافه شده. @container قبلاً فقط inline-size container می‌ساخت، ولی وقتی می‌خواستی از واحدهایی مثل cqb یا cqh استفاده کنی که به ارتفاع کانتینر وابسته‌ان، کم میاوردی. حالا @container-size این مشکل رو حل می‌کنه و size container کامل می‌سازه.

علاوه بر اینا، یوتیلیتی‌های zoom-* برای CSS zoom property، tab-* برای کنترل عرض کاراکتر tab، و پشتیبانی از variant های ترکیبی در CSS هم اضافه شدن.

نکات کلیدی:

• چهار پالت رنگی جدید در v4.2: mauve، olive، mist، taupe
• پلاگین webpack اختصاصی با سرعت بیش از ۲× نسبت به PostCSS
• یوتیلیتی‌های logical property بیشتر برای RTL/LTR
• استایل‌دهی کامل اسکرول‌بار در v4.3 (رنگ، عرض، gutter)
• @container-size برای container query های وابسته به ارتفاع
• یوتیلیتی‌های جدید zoom، tab-size، و variant های ترکیبی