Tailwind CSS v4.3: نوارهای اسکرول، رنگ های جدید و موارد دیگر

Tailwind CSS نسخه 4.3 اینجاست، و از آنجایی که ظاهراً ارسال نسخه 4.2 آسان تر از به خاطر سپردن وبلاگ درباره آن بود، این پست نگاهی گذرا به دو نسخه با ارزش چیزهای جدید است.

در اینجا چیزی است که در نسخه 4.2 آمده است:

• جدید mauve، olive، mist، و taupe پالت ها – چهار پالت خنثی دیگر زمانی که خاکستری، روی، خنثی، سنگ و تخته سنگ به نوعی شما را شکست داده اند.
• یک پلاگین پک وب ممتاز – برای افزایش عملکرد گسترده در چارچوب هایی مانند Next.js.
• ابزارهای بیشتر برای ویژگی های منطقی – از جمله pbs-*، mbs-*، inline-*، block-*و ابزارهای جدید منطقی تو در تو.
• جدید font-features-* ابزار – کنترل ویژگی های OpenType در سطح پایین بدون نوشتن هر بار CSS سفارشی.

… و در اینجا چیزهای جدیدی در نسخه 4.3 وجود دارد:

بسیاری از پیشرفت‌ها در نسخه 4.2، از جمله ابزارهای جدید خواص بولی و font-features-* پشتیبانی حاصل از همکاری با تیم‌های نتفلیکس و ورسل از طریق برنامه شریک ما. اگر بهبودهای چارچوبی مانند این وجود دارد که باعث می شود Tailwind CSS برای تیم شما بهتر کار کند، خوشحال می شویم کمک کنیم.

پروژه های خود را با نصب آخرین نسخه ارتقا دهید tailwindcss از npm:

npm install tailwindcss@latest @tailwindcss/cli@latest

npm install tailwindcss@latest @tailwindcss/vite@latest

npm install tailwindcss@latest @tailwindcss/postcss@latest

npm install tailwindcss@latest @tailwindcss/webpack@latest

در نسخه 4.2، چهار پالت رنگ جدید را به تم پیش فرض اضافه کردیم: mauve، olive، mist، و taupe.

اینها در اصل از Oatmeal بیرون آمدند، کیت سایت بازاریابی چند مضمونی که ما برای Tailwind Plus در ماه دسامبر منتشر کردیم، جایی که ما به پالت‌های خنثی‌تری نیاز داشتیم که هنوز با رنگ‌های خاکستری‌ای که قبلا ارسال می‌کردیم متفاوت بود.

همه آنها در دسته محله های خنثی مفید هستند که در آن شما چیزی می خواهید که هنوز مانند خاکستری رفتار کند اما کمی شخصیت بیشتری داشته باشد:

وقتی می خواهید کل طرح کمی گرم تر، خنک تر، سبزتر یا … خاکستری شود، آنها جایگزین خوبی برای پالت های خاکستری موجود هستند؟

div class="bg-mauve-950 text-mauve-100 ...">Mauvediv>div class="bg-olive-100 text-olive-950 ...">Olivediv>div class="border border-mist-200 shadow-taupe-950/10 ...">Mist and taupediv>

برای یک شبکه زیبا از تمام رنگ های موجود، به مستندات رنگی مراجعه کنید.

Tailwind CSS v4.2 یک ویژگی خاص اضافه کرد @tailwindcss/webpack لودر برای ادغام Tailwind CSS در پروژه های بسته وب.

پیش از این، پروژه های وب پک معمولاً Tailwind را اجرا می کردند postcss-loader و @tailwindcss/postcssکه کار می کند، اما به این معنی است که CSS باید کمی از طریق PostCSS دور بزند تا Tailwind بتواند رشته ای را که قبلاً می داند چگونه کامپایل کند، در دست بگیرد.

لودر اختصاصی این کار اضافی را نادیده می‌گیرد، و ما شاهد بوده‌ایم که Tailwind را در پروژه‌های پک وب بزرگ و پیچیده 2 برابر سریع‌تر می‌کند. برای مثال، در اینجا چیزی است که هنگام آزمایش در برابر اسناد tailwindcss.com با Next.js و Turbopack دیدیم:

استفاده از آن همان تنظیماتی است که از سایر بارگذارهای بسته وب به آن عادت کرده اید:

const MiniCssExtractPlugin = require("mini-css-extract-plugin");module.exports = {  plugins: [new MiniCssExtractPlugin()],  module: {    rules: [      {        test: /\.css$/i,        use: [MiniCssExtractPlugin.loader, "css-loader", "@tailwindcss/webpack"],      },    ],  },};

از آنجایی که Turbopack از بارگذارهای بسته وب از طریق لایه سازگاری خود پشتیبانی می کند، این پیشرفت ها به آنجا منتقل می شوند، که برای فریم ورک هایی مانند Next.js که Turbopack در حال تبدیل شدن به استاندارد است، بسیار مهم است.

نگاهی بیندازید @tailwindcss/webpack برای جزئیات بیشتر بخوانید.

Tailwind CSS نسخه 4.2 مجموعه کاملی از ابزارهای ویژگی بولی جدید را اضافه کرد که ساخت طرح‌بندی‌هایی را آسان می‌کند که به درستی با حالت‌ها و جهت‌های مختلف تایپ سازگار شوند.

برای فضاها، ابزارهای شروع و پایان جدید پد، حاشیه، صفحه اسکرول، جعبه اسکرول و بلوک مرزی وجود دارد:

div class="mbs-6 mbe-2 pbs-4 pbe-8 ...">  div>

div class="scroll-mbs-4 scroll-mbe-4 scroll-pbs-12 scroll-pbe-12 ...">  div>

div class="border-bs border-be-2 ...">  div>

ما همچنین ابزارهای اندازه‌گیری منطقی را برای آن اضافه کرده‌ایم inline-size و block-sizeبه همراه گزینه های حداقل و حداکثر:

div class="block-64 inline-full max-block-screen max-inline-lg min-block-24 min-inline-0 ...">  div>

و ما ابزارهای موقعیت یابی عناصر منطقی تو در تو را اضافه کرده ایم:

div class="absolute inset-s-0 inset-e-4 inset-bs-2 inset-be-8 ...">  div>

موجود start-* و end-* ابزارهای برقی هنوز در دسترس هستند اما اکنون به نفع آن منسوخ شده اند inset-s-* و inset-e-* بنابراین کل API با آن مطابقت دارد inset-bs-* و inset-be-*.

نگاهی بیندازید padding، margin، scroll-padding، scroll-margin، border-width، inline-size، block-size، و top / right / bottom / left اسناد برای جزئیات بیشتر

ما هم اضافه کردیم font-features-* کنترل آب و برق font-feature-settings:

div class='font-features-["tnum"] ...'>  div>

برای موارد رایج مانند اعداد جدولی، هنوز باید به ابزارهای سطح بالاتری مانند اعداد برسید tabular-nums اول، زیرا هیچ کس مجبور نیست این را به خاطر بسپارد "tnum" چیزی است

اما هنگامی که شما نیاز به فعال کردن یک مجموعه سبک خاص فونت یا سایر ویژگی‌های OpenType دارید، ما یک ابزار اختصاصی نداریم که font-features-* یک دریچه فرار تمیز به شما می دهد.

نگاهی بیندازید font-feature-settings اسناد برای جزئیات بیشتر

Tailwind CSS v4.3 ابزارهای شخص اول را برای CSS Scrollbar API اضافه می کند، بنابراین می توانید در نهایت بدون باز کردن برگه دوم و به یاد آوردن مرورگرهایی که از چه چیزی پشتیبانی می کند، کارهای خسته کننده اما مفید را با اسکرول انجام دهید.

از آن استفاده کنید scrollbar-auto، scrollbar-thin، و scrollbar-none برای کنترل scrollbar-width:

div class="scrollbar-thin scrollbar-thumb-sky-700 scrollbar-track-sky-100 overflow-auto ...">  div>

همچنین می توانید رنگ های نوار اسکرول را با استفاده از آن کنترل کنید scrollbar-thumb-* و scrollbar-track-* آب و برق:

div class="scrollbar-thumb-sky-700 scrollbar-track-sky-100 overflow-auto ...">  div>

آنها همچنین با اصلاح کننده های کدورت رنگ معمولی کار می کنند:

div class="scrollbar-thumb-slate-900/60 scrollbar-track-slate-900/10 ...">  div>

و برای جلوگیری از تغییر طرح هنگام ظاهر شدن نوارهای پیمایش، ما اضافه کردیم scrollbar-gutter-auto، scrollbar-gutter-stable، و scrollbar-gutter-both:

div class="scrollbar-gutter-stable overflow-auto ...">  div>

نگاهی بیندازید scrollbar-width، scrollbar-color، و scrollbar-gutter اسناد برای جزئیات بیشتر

در Tailwind CSS نسخه 4.0، پشتیبانی از درخواست‌های کانتینر شخص اول را اضافه کردیم @container ابزاری که ظرفی با اندازه داخلی ایجاد می کند.

این همان چیزی است که بیشتر اوقات می خواهید، اما واحدهای طول پرس و جو کانتینر به صورت یکسان است cqb و cqh به اندازه بلوک ظرف بستگی دارد و ظروف با اندازه داخلی این اطلاعات را نشان نمی دهند.

بنابراین در نسخه 4.3 اضافه کردیم @container-size، که در عوض یک ظرف اندازه ایجاد می کند:

div class="@container-size">  div class="h-[50cqb]">      div>div>

همچنین می توانید ظروف را با ابعاد نامگذاری کنید @container-size/{name}، درست مثل @container/{name}.

برای جزئیات بیشتر، اسناد طراحی واکنشگرا را بررسی کنید.

Tailwind CSS v4.3 اضافه می کند zoom-* ابزارهای CSS zoom ویژگی، یکی از آن ویژگی‌های باستانی مرورگر است که در کروم 1 در سال 2008 پشتیبانی می‌شد، اما تا سال 2024 به طور کامل در همه مرورگرهای اصلی پشتیبانی نشد، پس از طی کردن مسیری زیبا از طریق چندین باگ SVG قدیمی:

div class="zoom-75 ...">Zoomed outdiv>div class="zoom-100 ...">Normaldiv>div class="zoom-125 ...">Zoomed indiv>

همچنین می توانید از مقادیر تصادفی و متغیرهای CSS استفاده کنید:

div class="zoom-[1.1] ...">Zoomed in a littlediv>div class="zoom-(--preview-zoom) ...">Zoomed using a variablediv>

نگاهی بیندازید zoom اسناد برای جزئیات بیشتر

ما هم اضافه کردیم tab-* ابزارهایی برای کنترل عرض رندر شده کاراکترهای برگه با استفاده از tab-size.

این بیشتر برای نمونه‌های کد، ویرایشگرها و هر رابط کاربری دیگری که در آن متن از پیش قالب‌بندی‌شده‌ای را که ممکن است حاوی برگه‌های واقعی باشد ارائه می‌دهید مفید است:

function indent() {	return 'tabbed';}

function indent() {	return 'tabbed';}

pre class="tab-2 ...">function indent() {
	return 'tabbed'
}pre>pre class="tab-8 ...">function indent() {
	return 'tabbed'
}pre>

مقادیر دلخواه و متغیرهای CSS در اینجا نیز کار می کنند:

pre class="tab-[12px] ...">...pre>pre class="tab-(--tab-size) ...">...pre>

نگاهی بیندازید tab-size اسناد برای جزئیات بیشتر

Tailwind CSS v4.3 انجام می دهد @variant هنگام استفاده از انواع در CSS به جای استفاده مستقیم در نشانه گذاری، انعطاف پذیرتر است.

اکنون می توانید از انواع انباشته استفاده کنید:

.button {  background: var(--color-sky-500);  @variant hover:focus {    background: var(--color-sky-600);  }}

.button {  background: var(--color-sky-500);  &:hover {    @media (hover: hover) {      &:focus {        background: var(--color-sky-600);      }    }  }}

و می توانید از انواع ترکیبی برای به اشتراک گذاشتن یک بلوک CSS در چندین نوع استفاده کنید:

.button {  background: var(--color-sky-500);  @variant hover, focus {    background: var(--color-sky-600);  }}

.button {  background: var(--color-sky-500);  &:hover {    @media (hover: hover) {      background: var(--color-sky-600);    }  }  &:focus {    background: var(--color-sky-600);  }}

معمولاً بهتر است یک کامپوننت واقعی ایجاد کنید و مستقیماً با کلاس‌های CSS Tailwind به آن استایل دهید، اما وقتی CSS ابزار مناسبی باشد، این کار را انجام می‌دهد. @variant کار کردن با آن بسیار زیباتر است

نگاهی بیندازید @variant اسناد برای جزئیات بیشتر

Tailwind CSS v4.0 عملکردی را معرفی کرد @utility تعاریفی که می توانید از آنها استفاده کنید --value(…) و --modifier(…) برای تعریف ابزارهایی که مقادیر موضوعی، مقادیر خالی، مقادیر دلخواه و اصلاح کننده ها را می پذیرند.

در نسخه 4.3 اکنون می توانید تغییر دهید --default(…) به --value(…) و --modifier(…) زمانی که ابزار باید با یا بدون مقدار اجرا شود:

@utility tab-* {  tab-size: --value(integer, --default(4));}

حالا برهنه tab ابزار ممکن است به 4، در حالی که tab-2 هنوز تصمیم می گیرد 2:

pre class="tab ...">...pre>pre class="tab-2 ...">...pre>

.tab {  tab-size: 4;}.tab-2 {  tab-size: 2;}

این کار تعریف یک API را آسان می‌کند که در آن یک ابزار ساده، در عین حال که از مقادیر صریح برای همان خانواده ابزار پشتیبانی می‌کند، کار بدیهی را انجام می‌دهد.

این یک چیز کوچک است، اما به نویسندگان پلاگین و هر کسی که برنامه های کاربردی سفارشی می نویسد اجازه می دهد تا API هایی ایجاد کنند که بسیار شبیه آنهایی هستند که ما در خود چارچوب ارسال می کنیم.

بنابراین Tailwind CSS v4.2 و v4.3 است!

با استفاده از npm به آخرین نسخه به روز رسانی کنید و از امروز شروع به بازی با آن کنید:

npm install tailwindcss@latest @tailwindcss/cli@latest

npm install tailwindcss@latest @tailwindcss/vite@latest

npm install tailwindcss@latest @tailwindcss/postcss@latest

npm install tailwindcss@latest @tailwindcss/webpack@latest

چیزهای جدید را امتحان کنید و به ما اطلاع دهید که با چه چیزی مواجه می شوید. فقط به یاد داشته باشید که اندازه برگه بالاتر از 4 یک جرم کیفری است و ممکن است منجر به تعلیق مجوز مهندسی نرم افزار شما شود.