‏تیلویند CSS v4.3.0: استایل‌دهی به اسکرول‌بار و ابزارهای جدید

تیلویند CSS نسخه ۴.۳.۰ رو منتشر کرد و این آپدیت چند قابلیت کاربردی جدید داره. مهم‌ترین چیزی که اضافه شده، ابزارهای بومی استایل‌دهی به اسکرول‌بار هست که دیگه نیازی به افزونه‌های شخص ثالث نداری.

با کلاس‌هایی مثل scrollbar-thin، scrollbar-thumb-* و scrollbar-track-* می‌تونی رنگ و عرض اسکرول‌بار رو کنترل کنی. کلاس scrollbar-gutter-stable هم فضایی رو از قبل رزرو می‌کنه تا وقتی اسکرول‌بار ظاهر می‌شه، لی‌اوت صفحه جابه‌جا نشه:

<div class="scrollbar-thin scrollbar-thumb-slate-500 scrollbar-track-slate-100 overflow-y-auto">
  <!-- content -->
</div>

<div class="scrollbar-gutter-stable">
  <!-- reserves space so layout doesn't jump -->
</div>

قابلیت Container Queries که قبلاً به تیلویند اضافه شده بود، حالا با ابزار @container-size کامل‌تر شده. این ابزار اجازه می‌ده کانتینر به سایز خودش دسترسی داشته باشه و از اون توی استایل‌ها استفاده کنه — نه اینکه فقط بر اساس سایز viewport واکنش نشون بده.

دو یوتیلیتی دیگه هم اضافه شدن: zoom-* برای مقیاس‌دهی محتوا بدون تأثیر روی جریان لی‌اوت، و tab-* برای کنترل اندازه تب در المان‌هایی که فاصله‌گذاری حفظ می‌شه مثل تگ ``.

دایرکتیو @variant هم انعطاف‌پذیرتر شده. حالا می‌تونی مستقیماً توی CSS ورریانت‌های ترکیبی (stacked) و مرکّب (compound) بنویسی — همون سینتکسی که توی کلاس‌های HTML استفاده می‌کردی:

@variant hover:focus {
  .my-component {
    outline: 2px solid currentColor;
  }
}

@variant hover, focus {
  .my-component {
    background: var(--color-slate-100);
  }
}

hover:focus یعنی هر دو شرط باید همزمان برقرار باشن، و hover, focus یعنی هر کدوم که برقرار بود کافیه — بدون نیاز به نوشتن چند قانون جداگانه.

در نهایت، ابزار ارتقاء (tailwindcss upgrade) هم بهبود پیدا کرده: زیرخط‌های معنادار در مقادیر دلخواه حفظ می‌شن، واحدها بدون تبدیل ناخواسته نگه داشته می‌شن، و ورریانت‌های :has() به فرم کوتاه has-[…] مایگریت می‌شن.

نکات کلیدی:

• استایل‌دهی به اسکرول‌بار (عرض، رنگ، گاتر) بدون افزونه، مستقیم توی تیلویند
• @container-size برای دسترسی کانتینر به سایز خودش در کوئری‌های کانتینر
• zoom-* برای مقیاس‌دهی و tab-* برای کنترل اندازه تب
• @variant حالا ورریانت‌های پشته‌ای و ترکیبی رو مستقیم توی CSS قبول می‌کنه
• بهبودهای ابزار ارتقاء برای مایگریشن پروژه‌های قدیمی‌تر