خلاصهای از امکانات جدید نسخه 4.0 از Tailwind CSS
1. موتور جدید با عملکرد بالا: (Oxide)
از موتوری جدید به نام Oxide بهره میبرد که با زبان Rust توسعه یافته است. این موتور باعث افزایش سرعت بیلد تا ۱۰ برابر و کاهش حجم بسته نصبی تا ۳۵٪ شده است.
بیلد کامل تا 5 برابر سریعتر شده
بیلد افزایشی بیش از 100 برابر سریعتر شده
نکته : اگر کندی مشاهده کردید، کشهای مربوط به Node.js# را پاک کنید:
rm -rf node_modules/.cache
2. طراحی برای وب مدرن:
از ویژگیهای مدرن CSS مانند کوئریهای کانتینر، لایههای Cascade و واحدهای نمایشی پویا مانند dvh، dvw و dvmin پشتیبانی میکند. این ویژگیها این امکان و میدن که طراحی کاملا رسپانسیو و انعطافپذیرتری داشته باشیم.
3. نصب سادهتر:
در این نسخه، Tailwind CSS با Lightning CSS یکپارچه شده است که پشتیبانی از
@import
و پیشوندهای خودکار را فراهم میکند. این به معنای عدم نیاز به استفاده از ابزارهایی مانند postcss-import و autoprefixer است. اگر از قبل آنها را نصب دارین، با این دستور حذف کنید:
npm uninstall postcss-import autoprefixer
4. افزونه رسمی برای Vite:
یکپارچگی کامل و عملکرد بهتر برای پروژههای Vite
5. تشخیص خودکار محتوا:
دیگر نیازی به تنظیم دستی مسیر فایلهای قالب نیست
نادیده گرفتن فایلهای غیرضروری مانند موارد درون .gitignore
6. پیکربندی مستقیم در CSS:
حذف نیاز به فایل tailwind.config.js
امکان تعریف متغیرهای تم، توکنهای طراحی، و موارد دیگر مستقیماً در CSS#
7. استفاده از متغیرهای CSS برای تمها:
دسترسی به توکن های طراحی بهصورت متغیرهای CSS برای استفاده در زمان اجرا
8. مقادیر و واریانتهای داینامیک:
قابلیت استفاده مستقیم از مقادیر دلخواه برای ابزارهای فاصله و ...
9. پالت رنگی P3 مدرن:
بهبود رنگها با استفاده از فضای رنگی جدید OKLCH
10. پشتیبانی از کوئریهای کانتینر:
اضافه شدن کوئریهای کانتینر بدون نیاز به افزونه
11. ابزارهای تبدیل سهبعدی (3D):
اضافهشدن قابلیتهای چرخش و تغییر مقیاس در فضای سهبعدی
12. گسترش API گرادیانتها:
پشتیبانی از گرادیانتهای شعاعی و مخروطی
استفاده از حالتهای مختلف برای تداخل رنگها
13. پشتیبانی از
@starting-style
:
امکان انیمیت کردن عناصر هنگام ظاهر شدن بدون نیاز به جاوااسکریپت
14. واریانت جدید not-*
اضافه شدن قابلیت استفاده از شبهکلاس :not() برای شرطگذاریهای منعکننده
نصب نسخه جدید
با اجرای دستور زیر، نسخه جدید را نصب کنید:
npm install tailwindcss@latest
برای پیدا کردن مشکلات احتمالی:
میتوانید از ابزارهای linting استفاده کنید تا مشکلات رو شناسایی کنید.
npx tailwindcss-cli build -o output.css
@DevTwitter | <Arash Pourrahim/>