همه‌چیز درباره تیلویند ۴: معرفی جدیدترین نسخه Tailwind 4.0

همه‌چیز درباره تیلویند ۴: معرفی جدیدترین نسخه Tailwind 4.0

تیلویند 4 یکی از بزرگ‌ترین به‌روزرسانی‌های فریمورک محبوب Tailwind CSS است که به توسعه‌دهندگان کمک می‌کند سریع‌تر و کارآمدتر رابط‌های کاربری مدرن و واکنش‌گرا طراحی کنند. در نسخه Tailwind 4.0، تغییرات و بهبودهای قابل‌توجهی اعمال شده است. در این مقاله از فراز کد، به بررسی کامل این نسخه و مقایسه آن با نسخه‌های قبلی می‌پردازیم.

تغییرات و ویژگی‌های جدید در Tailwind 4.0

در مارس ۲۰۲۴، تیم Tailwind CSS از موتور جدیدی به نام Tailwind Oxide رونمایی کرد. این موتور با هدف بهبود سرعت و کارایی فرآیند build طراحی شده است و با ارائه زنجیره ابزار یکپارچه و پیکربندی ساده‌تر، تجربه بهتری را برای توسعه‌دهندگان فراهم می‌کند. دیگر ویژگی های تیلویند 4 شامل:

1. حذف پشتیبانی از مرورگرهای قدیمی : یکی از تغییرات مهم تیلویند 4، حذف پشتیبانی از مرورگرهای قدیمی مانند Internet Explorer 11 است. این تصمیم باعث شده است که توسعه‌دهندگان بتوانند از ویژگی‌های مدرن CSS مانند Container Queries و :has() selector بدون نگرانی استفاده کنند.
2. کاهش حجم خروجی CSS : در Tailwind 4.0، حجم خروجی CSS نسبت به نسخه‌های قبلی بهینه‌تر شده است. با استفاده از تکنیک‌های tree-shaking پیشرفته، تنها کلاس‌هایی که در پروژه استفاده شده‌اند، در فایل نهایی CSS باقی می‌مانند. این تغییر باعث کاهش چشمگیر حجم فایل CSS می‌شود.
3. تغییر در سیستم رنگ‌بندی : تیلویند ۴ سیستم رنگی جدیدی ارائه کرده که شامل رنگ‌های پویا و بهینه‌شده برای بهتر دیده شدن در صفحات تیره و روشن است. همچنین برخی رنگ‌های قدیمی حذف شده‌اند یا تغییر نام داده‌اند تا مدیریت رنگ‌ها ساده‌تر شود.
4. بهبود عملکرد در حالت JIT (Just-In-Time) : حالت JIT Compiler که از نسخه ۳ معرفی شد، در تیلویند ۴ بهبود یافته و حالا عملکرد سریع‌تری دارد. در این نسخه، کلاس‌های dynamic مانند [width:calc(100%-4rem)] به‌طور بهینه‌تری پردازش می‌شوند.
5. بهینه‌سازی Responsive Design : تیلویند ۴ پشتیبانی بهتری از Container Queries ارائه کرده و امکان طراحی‌های منعطف‌تر را فراهم کرده است. با این تغییر، می‌توان استایل‌های واکنش‌گرا را بر اساس سایز والدین کنترل کرد، نه فقط بر اساس سایز صفحه نمایش.
6. اضافه شدن ویژگی‌های جدید در Typography و Forms : این نسخه ویژگی‌های جدیدی برای تایپوگرافی و فرم‌ها معرفی کرده است که شامل بهبود نمایش متون خوانا، کنترل بهتر روی فاصله‌ها و ارتفاع خطوط، و بهینه‌سازی استایل دکمه‌ها و فیلدهای ورودی می‌شود.
7. پشتیبانی بهتر از CSS Native Variables : در Tailwind 4.0، استفاده از متغیرهای CSS بهبود یافته و حالا می‌توان به‌راحتی متغیرهای رنگی، اندازه‌ها و سایر مقادیر را با استفاده از CSS native variables مدیریت کرد. این موضوع باعث انعطاف‌پذیری بیشتر در طراحی می‌شود.

پیکربندی CSS-First در Tailwind 4.0

یکی از تغییرات مهم در نسخه ۴، معرفی رویکرد CSS-First است. در نسخه‌های قبلی، توسعه‌دهندگان باید فایل tailwind.config.js را برای پیکربندی و سفارشی‌سازی استفاده می‌کردند. اما در نسخه ۴، با استفاده از دستور
;”import “tailwindcss@ در فایل CSS اصلی، می‌توان به‌راحتی Tailwind را اضافه کرد و نیازی به فایل پیکربندی جداگانه نیست.

برای پروژه‌های قدیمی که از فایل پیکربندی استفاده می‌کنند، می‌توان با دستور @config “مسیر/به/فایل/tailwind.config.js”; در فایل CSS، تنظیمات قبلی را بارگذاری کرد.

تشخیص منبع (Source Detection) در Tailwind 4.0

در نسخه ۴، قابلیت تشخیص منبع بهبود یافته است. با استفاده از تابع source() هنگام import کردن Tailwind، می‌توان محدوده فایل‌های اسکن‌شده را مشخص کرد. برای مثال:

@import "tailwindcss" source("../src");

همچنین، برای اضافه کردن فایل‌هایی که به‌طور پیش‌فرض شناسایی نمی‌شوند، می‌توان از دستور @source “مسیر/به/فایل”; استفاده کرد.

غیرفعال کردن Preflight در Tailwind 4.0

اگر نیازی به استایل‌های پیش‌فرض Tailwind ندارید، می‌توانید با import کردن لایه‌های مورد نیاز، بقیه را حذف کنید:

@layer theme, base, components, utilities;
@import "tailwindcss/theme" layer(theme);
@import "tailwindcss/utilities" layer(utilities);

این کار به کاهش حجم CSS و بهبود عملکرد کمک می‌کند.

شخصی‌سازی تم‌ها در Tailwind 4.0

در رویکرد جدید CSS-First، سفارشی‌سازی استایل‌ها مستقیماً در فایل CSS انجام می‌شود. برای اضافه کردن رنگ‌های جدید:

@import "tailwindcss";

@layer theme {
  theme.colors.background = '#764abc';
  theme.colors.lilac = '#eabad2';
  theme.colors.light = '#eae3f5';
}

سپس می‌توانید از این رنگ‌ها در کلاس‌های Tailwind استفاده کنید:

<div class="bg-background text-light">
  <!-- محتوا -->
</div>

مقایسه با نسخه‌های قبلی

نتیجه‌گیری

تیلویند ۴ با معرفی موتور جدید، پیکربندی ساده‌تر و امکانات پیشرفته‌تر، تجربه توسعه بهتری را برای طراحان و توسعه‌دهندگان وب فراهم می‌کند. با ارتقاء به این نسخه، می‌توانید از بهبودهای عملکردی و امکانات جدید بهره‌مند شوید.

سوالات متداول در مورد Tailwind 4.0