نسخه آلفا Tailwind CSS v4.0 منتشر شد.

تابستان سال گذشته، پیش نمایشی از Engine جدید و قدرتمند Tailwindcss با نام Oxide منتشر شد و حالا پس از مدتی توسعه، این Engine جدید که عملکرد خیلی بهتری داره در قالب ارائه اولیه ( آلفا ) ورژن 4 منتشر شده.

قدرتمند تر و کارامد تر شدن به لطف Engine جدید:

  • تا 10 برابر سریعتر: با این Engine زمان بیلد یک وبسایت کامل از 960ms به 105ms رسیده!
  • سبک و کم حجم: 35% سبک تر با وجود قدرتمند تر شدن Engine جدید!
  • کارایی بهتر به لطف Rust: برخی از محاسبات سنگین این ورژن با زبان Rust پیاده شدن و در نتیجه شاهد عملکرد و کارایی بهتری خواهیم بود.
  • حذف وابستگی های اضافه: تنها Dependency این ورژن Lighting CSS خواهد بود.
  • پارسر اختصاصی: این Parser اختصاصی نسبت به قبلیه خودش یعنی PostCSS تا 2 برابر سریعتر خواهد بود.


طراحی شده برای هرچه مدرن تر و کارامد تر بودن:

  • کنترل بهتر استایل ها: به لطف ساپورت cascade layers بصورت native, دیگه بوسیله layer@ میتونیم کنترل بهتر و دقیق تری رو برروی استایل هامون داشته باشیم.
  • کنترل سایز هر تگ HTML: به لطف container query هایی چون *-min@ و *-max@ دیگه میتونیم بصورت native استایل های متفاوتی را طبق تغییر سایز هر المانی مثل یک تگ div اعمال کنیم ( یچیزی تو مایه های media query هستش )
  • تعریف و ایجاد پراپرتی های دلخواه: بوسیله property@ میتونیم پراپرتی های دلخواه خودمون را تعریف کنیم. مثلا میشه از این قابلیت برای اعمال Transition روی یک background gradiet استفاده کنیم.

یکپارچه سازی و حذف کانفیگ ها و وابستگی های اضافی:

تو این ورژن تنها Dependency که برای Tailwind وجود داره Lighting CSS هست و خیلی از چیزها بصورت Native ساپورت میشن. مثلا import@ را داریم و مثل گذشته برای پیاده سازیش دیگه به کانفیگ postcss-import نیازی نیست.

همچنین خیلی از پلاگین های دیگه مثل autoprefixer رو هم تو این ورژن بهشون نیازی نخواهیم داشت.

دیگه تو این ورژن چیا داریم ؟

این ورژن امکانات جدید و تغییرات زیادی را داره و برخی از مهم ترینه این تغییرات رو در بالا به اختصار شرح دادیم، برای مطالعه کامل تر تغییرات این نسخه میتونید به وبسایت رسمی Tailwind که لینکش را در انتهای این پست قرار دادیم مراجعه کنید. همچنین به محض انتشار رسمی این ورژن، یک مقاله ای جهت بررسی و معرفی کامل این نسخه آماده خواهیم کرد.

منبع: https://tailwindcss.com/blog/tailwindcss-v4-alpha

راستی یک دوره متفاوت آموزش فرانت اند رو شروع کردیم و تو این دوره قراره فرانت اند را طی مسیری مدرن و خاص به پشتوانه roadmap فرانت اند وبسایت roadmap.sh یاد بگیریم، دوست داشتید نگاهی هم به این دوره بندازید:)
https://vaspar.io/courses/frontend