Tailwind CSS V4.0: ویژگی ها و پیشرفت های جدید

Tailwind CSS V4.0 چندین به روزرسانی مهم را معرفی می کند که باعث افزایش عملکرد ، ساده سازی پیکربندی و ارائه ویژگی های جدید برای توسعه دهندگان می شود. در اینجا یک مرور کلی از تغییرات کلیدی آورده شده است:

1. موتور با کارایی بالا

Tailwind CSS V4.0 تحت بازنویسی کامل قرار گرفته است ، در نتیجه:

• ساخت سریعتر: بازسازی کامل بیش از 3.5 برابر سریعتر است و ساختهای افزایشی بیش از 8 برابر سریعتر است.

• اندازه بسته نرم افزاری کاهش یافته: اندازه بسته نصب شده بیش از 35 ٪ کاهش یافته است.

2. نصب ساده

تنظیم Tailwind CSS V4.0 اکنون ساده تر است:

  npm install tailwindcss @tailwindcss/postcss

  // postcss.config.js
  export default {
    plugins: ["@tailwindcss/postcss"],
  };

• وارد کردن Tailwind در CSS خود:

  /* styles.css */
  @import "tailwindcss";

این رویکرد نیاز به @tailwind بخشنامه ها و افزونه های خارجی.

3. پیکربندی CSS-First

Tailwind CSS V4.0 پیکربندی را از JavaScript به CSS تغییر می دهد:

• تعریف سفارشی سازی در CSS:

  /* styles.css */
  @import "tailwindcss";

  @theme {
    --font-display: "Satoshi", "sans-serif";
    --breakpoint-3xl: 1920px;
    --color-avocado-100: oklch(0.99 0 0);
    /* ... */
  }

این روش فرآیند پیکربندی را ساده تر می کند و یکپارچه با برگه های سبک شما ادغام می شود.

4. تشخیص خودکار محتوای

Tailwind CSS V4.0 به طور خودکار منابع محتوا را تشخیص می دهد:

• نیازی به پیکربندی دستی نیست: tailwind پروژه خود را برای شناسایی پرونده های الگو ، از بین بردن نیاز به پیکربندی دستی به صورت دستی اسکن می کند content آرایه

5. پالت رنگی مدرن

پالت رنگ پیش فرض برای استفاده از oklch مدل رنگ:

• تقویت رنگ پیشرفته: این تغییر باعث ایجاد یک رنگ وسیع تر می شود و در نتیجه رنگهای واضح تر و دقیق تر ایجاد می شود.

6. مقادیر و انواع ابزار پویا

Tailwind CSS V4.0 مقادیر و انواع ابزار پویا را معرفی می کند:

  
 class="grid grid-cols-15">
    
  

  
 data-current class="opacity-75 data-current:opacity-100">
    
  

این ویژگی ها یک ظاهر طراحی انعطاف پذیر و پویا تر را بدون پیکربندی اضافی امکان پذیر می کند.

ادغام tailwind css v4.0 با next.js

ادغام Tailwind CSS V4.0 در یک پروژه بعدی. JS ساده است:

1. CSS Tailwind را نصب کنید:

   npm install tailwindcss @tailwindcss/postcss

1. پیکربندی ها را پیکربندی کنید:

   // postcss.config.js
   export default {
     plugins: ["@tailwindcss/postcss"],
   };

1. وارد کردن Tailwind در CSS خود:

   /* styles.css */
   @import "tailwindcss";

1. تعریف سفارشی سازی در CSS:

   /* styles.css */
   @import "tailwindcss";

   @theme {
     --font-display: "Satoshi", "sans-serif";
     --breakpoint-3xl: 1920px;
     --color-avocado-100: oklch(0.99 0 0);
     /* ... */
   }

این تنظیم فرآیند ادغام را ساده می کند و نیاز به پرونده های پیکربندی اضافی را کاهش می دهد.

برای یک تظاهرات بصری و بینش های بیشتر ، می توانید فیلم زیر را تماشا کنید:

Tailwind CSS V4 برای NextJs ، Astro و Vite امروز