آپدیت جدید tailwind

Tailwind CSS به‌عنوان یکی از محبوب‌ترین فریم‌ورک‌های طراحی رابط کاربری مبتنی بر کلاس‌های Utility-first، همیشه در حال تحول و ارتقاء است. در نسخه‌های 4.0 و 4.1، ویژگی‌ها و بهینه‌سازی‌های قابل توجهی به این فریم‌ورک اضافه شده‌اند که در ادامه به‌صورت کامل بررسی می‌کنیم.

چرا Tailwind CSS 4 یک آپدیت مهم است؟

نسخه‌ی ۴ Tailwind CSS با هدف بهبود عملکرد، پشتیبانی از استانداردهای جدید CSS و ساده‌سازی فرآیند توسعه منتشر شده است. مهم‌ترین نکات این آپدیت شامل موارد زیر است:

۱. ساختار جدید و سریع‌تر با استفاده از PostCSS 8

در Tailwind CSS 4، وابستگی به نسخه‌ی قدیمی PostCSS حذف شده و حالا به‌طور کامل با PostCSS 8 سازگار شده است. این تغییر باعث افزایش سرعت build و پشتیبانی بهتر از ابزارهای مدرن شده است.

۲. حذف کامل JIT Engine مجزا و یکپارچه‌سازی آن

از نسخه ۲.۱ به بعد، Tailwind از JIT (Just-in-Time Compiler) استفاده می‌کرد. در نسخه ۴، JIT به‌طور کامل با هسته‌ی فریم‌ورک ادغام شده و دیگر نیازی به فعال‌سازی دستی نیست. این موضوع موجب:

• افزایش سرعت compile

• کاهش حجم خروجی نهایی

• پشتیبانی از کلاس‌های دلخواه به‌صورت آنی

۳. پشتیبانی از CSS Variables در Utilityها

اکنون می‌توانید از متغیرهای CSS در کلاس‌های Tailwind استفاده کنید. این قابلیت به شما این امکان را می‌دهد تا تم‌های داینامیک‌تر بسازید و مقادیر رنگ، فاصله یا سایز را بر اساس متغیر تغییر دهید.

۴. افزایش انعطاف‌پذیری در Media Queries

Tailwind 4.1 قابلیت تعریف شرط‌های رسانه‌ای دلخواه را ساده‌تر کرده است. مثلاً:

@media (min-width: 768px) and (orientation: landscape) { /* styles */ } و حالا می‌توانید این تنظیمات را مستقیم در پیکربندی Tailwind پیاده‌سازی کنید.

۵. بهینه‌سازی Tailwind CLI و عملکرد بهتر در Vite و Next.js

یکی از تغییرات کلیدی نسخه جدید، عملکرد بسیار بهینه‌تر در محیط‌های توسعه‌ی محبوب مانند:

• Vite

• Next.js

• Nuxt

• Laravel Mix

نسخه ۴ سرعت اجرای دستورات Tailwind CLI را تا ۴ برابر افزایش داده و هماهنگی بهتری با Hot Reload فراهم کرده است.

۶. اضافه شدن کلاس‌های جدید و کاربردی

در نسخه‌های 4.0 و 4.1 کلاس‌های زیادی اضافه شده‌اند که توسعه‌ی UI را ساده‌تر می‌کنند. برخی از آن‌ها:

• isolate و isolation-auto برای کنترل context stacking

• text-balance برای تراز متن به‌صورت خودکار

• scroll-mt-* برای تنظیم margin هنگام اسکرول شدن به IDها

۷. پشتیبانی بهتر از RTL و زبان‌های راست‌به‌چپ

Tailwind در نسخه جدید پشتیبانی بسیار بهتری از زبان‌های RTL (مثل فارسی و عربی) ارائه می‌دهد. حالا دیگر نیازی به پکیج‌های جانبی نیست و می‌توانید در تنظیمات Tailwind، حالت RTL را فعال کنید و از کلاس‌های RTL مثل text-right, ml-auto, rtl:pl-4 و … استفاده کنید.

۸. مستندات بهتر و نسخه‌ی تعاملی playground

Tailwind با نسخه 4 یک playground تعاملی ارائه داده که توسعه‌دهندگان می‌توانند کدهای CSS خود را به‌صورت زنده تست کنند. همچنین مستندات نسخه جدید بسیار منظم‌تر و قابل فهم‌تر شده‌اند.