انتشار تیلwind CSS نسخه 4.3.0: تحلیل عمیق معماری

نمای کلی اجرایی و اهمیت معماری

نسخه 4.3.0 تیلwind CSS نشان‌دهنده یک تکامل قابل توجه در اکوسیستم CSS مبتنی بر ابزار (utility-first) است که معماری سطح پایینی را که در نسل v4 معرفی شده بود، بهبود می‌بخشد و در عین حال قابلیت‌های طراحی و چیدمان مدرن را گسترش می‌دهد. با افزایش پیچیدگی برنامه‌ها، توسعه‌دهندگان به‌طور فزاینده‌ای به کوئری‌های کانتینر پیشرفته، اسکرول‌بارهای سفارشی و مدیریت حالت دقیق به‌طور مستقیم در فایل‌های استایل متکی هستند. این نسخه با معرفی پشتیبانی بومی از ابزارهای ساختاری پیشرفته، قوانین @variant قدرتمندتر و پسوندهای کاربردی و قوی @utility، مستقیماً به این تقاضاها پاسخ می‌دهد. کامپایلر زیرساختی و ابزارهای یکپارچه‌سازی—به‌ویژه @tailwindcss/vite و @tailwindcss/postcss—همچنین پچ‌های سخت‌سازی حیاتی را دریافت می‌کنند که خرابی‌های ساخت در سناریوهای مرزی و ناهنجاری‌های حل مسیر را از بین می‌برند.

از دیدگاه معماری، نسخه 4.3.0 تعهد تیم تیلwind Labs را به مدل پیکربندی مبتنی بر CSS برجسته می‌کند. این فریم‌ورک با بهینه‌سازی نحوه استانداردسازی مقادیر دلخواه، نحوه حل پلاگین‌ها و نحوه نگاشت تمیز ویژگی‌های پیشرفته CSS به کلاس‌های ابزار اتمی، شکاف بین سرعت نوشتن خام CSS و ثبات دقیق سیستم طراحی را پر می‌کند. تیم‌های سازمانی و نویسندگان کتابخانه‌های کامپوننت، خروجی‌های نوع داده (type) پیشرفته و تعاریف ابزار چندمقادیری انعطاف‌پذیر را برای حفظ ایمنی نوع داده و یکپارچگی توکن‌های طراحی در مونورپوهای پیچیده بسیار سودمند خواهند یافت.

بهبودهای کلیدی و ارگونومی توسعه‌دهنده

ارگونومی توسعه‌دهنده در نسخه 4.3.0 با معرفی ویژگی‌های کنترل چیدمان و رابط کاربری بسیار درخواستی جهش بزرگی به جلو دارد. از همه مهم‌تر، گنجاندن ابزار @container-size (#18901) به توسعه‌دهندگان قدرت می‌دهد تا به شکل بصری‌تری به ابعاد کانتینر پاسخ دهند. علاوه بر این، پشتیبانی جامع از اسکرول‌بارهای بومی فرا رسیده است: توسعه‌دهندگان اکنون می‌توانند از scrollbar-{auto,thin,none} برای scrollbar-width، در کنار ابزارهای رنگی scrollbar-thumb-* و scrollbar-track-* (#19981، #20019)، که با ابزارهای scrollbar-gutter-* (#20018) تکمیل می‌شوند، استفاده کنند. این اضافات، نیاز به قطعه کدهای طولانی و سفارشی CSS را هنگام مدیریت زیبایی‌شناسی اسکرول‌بار در موتورهای مختلف مرورگر از بین می‌برد.

فراتر از چیدمان و اسکرول، نسخه 4.3.0 کنترل دقیقی بر روی مقیاس‌بندی سند و فاصله تایپوگرافی از طریق ابزارهای جدید zoom-* (#20020) و tab-* (#20022) به ارمغان می‌آورد. تطبیق الگوی پیشرفته نیز به شدت بهبود یافته است؛ توسعه‌دهندگان اکنون می‌توانند از @variant با هم واریانت‌های انباشته (مانند @variant hover:focus { … }) و هم واریانت‌های ترکیبی (مانند @variant hover, focus { … }) استفاده کنند (#19996). علاوه بر این، تعاریف کاربردی @utility اکنون از --default(...) در دستورالعمل‌های --value(...) و --modifier(...) پشتیبانی می‌کنند (#19989) که انعطاف‌پذیری بی‌سابقه‌ای را هنگام ساخت کامپوننت‌های سیستم طراحی سفارشی ارائه می‌دهد.

ماتریس مقایسه معماری

تغییرات ساختارشکن و نکات مهاجرت

کاملاً سازگار با نسخه‌های قبلی.

در حالی که نسخه 4.3.0 هیچ تغییر ساختارشکن زمان اجرایی را برای APIهای عمومی مستقر معرفی نمی‌کند، چندین قانون دقیق تجزیه داخلی و استانداردسازی برای جلوگیری از خروجی‌های غیرمنتظره تدوین شده‌اند. برای مثال، تعاریف کاربردی @utility اکنون به شدت نیاز دارند که --value(...) حضور داشته باشد، به این معنی که ابزارهای سفارشی معیوب خطاهای اعتبارسنجی زمان ساخت را پرتاب می‌کنند و به جای شکست خاموش یا تولید CSS نامعتبر، متوقف می‌شوند. علاوه بر این، روال‌های استانداردسازی محکم‌تر شده‌اند: واریانت‌های دلخواه :has() اکنون به درستی از سینتکس (&:has(...)) به فرم بهینه‌شده‌ی has-[...] منتقل می‌شوند و فضای خالی قابل توجه یا واحدهای صریح (مانند -20in) به جای اجبار به واحدهای پایه نرمال‌شده، به دقت حفظ می‌شوند. توسعه‌دهندگانی که از بیلدهای اولیه v4 ارتقا می‌دهند باید یک بیلد آزمایشی اجرا کنند تا مطمئن شوند که استانداردسازی‌های ویژگی‌های دلخواه سفارشی با این استانداردهای جدیداً اجرا شده مطابقت دارند.

راهنمای گام به گام ارتقا

ارتقا به تیلwind CSS نسخه 4.3.0 به لطف پایبندی دقیق به نسخه‌سازی معنایی و سازگاری با نسخه‌های قبلی، یک فرآیند ساده است. برای ادغام آخرین نسخه در پروژه خود، این مراحل را دنبال کنید:

1. به‌روزرسانی وابستگی‌های پکیج مدیر پکیج دلخواه خود را اجرا کنید تا آخرین نسخه تیلwind CSS و پکیج‌های یکپارچه‌سازی Vite/PostCSS آن را دریافت کنید:

   npm install tailwindcss@latest @tailwindcss/vite@latest @tailwindcss/postcss@latest --save-dev
   

2. استفاده از ابزارهای جدید در CSS در نقطه ورود اصلی CSS خود، اکنون می‌توانید فوراً قوانین جدید اندازه کانتینر، اسکرول‌بار یا واریانت ترکیبی را پیاده‌سازی کنید:

   @import "tailwindcss";
   
   @layer utilities {
     @variant hover, focus {
       .custom-interactive-card {
         @apply border-blue-500 shadow-lg;
       }
     }
   }
   
   .scrollable-container {
     @apply scrollbar-thin scrollbar-thumb-rounded scrollbar-thumb-slate-400;
   }
   

3. بررسی ساخت و استانداردسازی پایگاه ساخت توسعه یا پروداکشن خود را اجرا کنید تا مطمئن شوید پلاگین به‌روزرسانی‌شده‌ی Vite به درستی ورودی‌های جاوا اسکریپت پکیج و مسیرهای نسبی را بدون هشدار حل می‌کند:

   npm run build