Tailwind CSS v2.2 – Tailwind CSS

خب، نمی‌توانم بگویم که واقعاً آن را برنامه‌ریزی کرده‌ایم، اما در چند هفته گذشته با افزودن ویژگی‌های جدید و هیجان‌انگیز به Tailwind بسیار لذت بردیم، و اکنون به نظر می‌رسد زمان مناسبی برای توقف انتشار است، بنابراین اینجاست – Tailwind CSS v2.2!

این باید یکی از پر ویژگی ترین نسخه های Tailwind باشد. معرفی حالت Just-in-Time در نسخه 2.1 درها را به بسیاری از ویژگی های جالب باز کرد که در غیر این صورت نمی توانستیم به راحتی اضافه کنیم و این نسخه پر از نمونه های عالی از آن است.

در اینجا نکات برجسته آمده است:

برای جزئیات کامل، به یادداشت های انتشار در GitHub مراجعه کنید.

توجه به این نکته ضروری است که اگرچه این یک نسخه کوچک است و هیچ تغییری در موتور کلاسیک وجود ندارد. حالت Just-in-Time هنوز در پیش نمایش است و نسخه 2.2 چند تغییر بسیار کوچک را معرفی می کند که ممکن است شما را تحت تأثیر قرار دهد.، بنابراین هنگام ارتقاء، حتماً تغییرات و حذف‌های موجود در یادداشت‌های انتشار را بخوانید.

هنگامی که برای ارتقاء آماده شدید، به سادگی آخرین نسخه را از npm نصب کنید و به مسابقات می روید:

npm install -D tailwindcss@latest

ما ابزار Tailwind CLI را از ابتدا با در نظر گرفتن عملکرد بازنویسی کرده‌ایم، در حالی که پشتیبانی از مجموعه‌ای از ویژگی‌های جدید را اضافه کرده‌ایم.

npx tailwindcss -o dist/tailwind.css --watch --jit --purge="./src/**/*.html"

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

• بدون نیاز به نصب یا پیکربندی – ساده npx tailwindcss -o output.css برای کامپایل Tailwind از هر کجا. حتی می توانید حالت JIT را با آن فعال کنید --jit فایل های محتوای خود را با استفاده از برچسب گذاری و انتقال دهید --purge گزینه، همه بدون ایجاد فایل پیکربندی.
• حالت مشاهده – بنابراین می توانید هر بار که تغییراتی ایجاد می کنید به طور خودکار CSS خود را بازسازی کنید.
• بهینه سازی عملکرد JIT – از آنجا که CLI ما مختص Tailwind است، ما توانسته‌ایم بهینه‌سازی‌های زیادی انجام دهیم که آن را به سریع‌ترین ابزار برای کامپایل CSS شما در حالت JIT تبدیل می‌کند.
• پشتیبانی را به حداقل برسانید – اکنون می توانید CSS خود را با cssnano فقط با اضافه کردن کوچک کنید --minify پرچم
• پشتیبانی از پلاگین PostCSS – CLI جدید هر افزونه اضافی را که با استفاده از a پیکربندی کنید، می خواند و به آن احترام می گذارد postcss.config.js فایل

این به طور کامل با CLI قبلی سازگار است، بنابراین اگر از قبل اسکریپت‌هایی را تنظیم کرده‌اید، باید بتوانید بدون ایجاد هیچ تغییری در اسکریپت‌های خود، نسخه 2.2 را ارتقا دهید.

برای اطلاعات بیشتر به مستندات Tailwind CLI به روز شده ما مراجعه کنید.

توجه داشته باشید که اگر استفاده کرده اید tailwindcss-cli بسته بندی بسته بندی، شما به راحتی می توانید به tailwindcss همانطور که می‌توانستیم مسائل مربوط به وابستگی به همتایان را که در وهله اول ما را مجبور به ایجاد لفاف می‌کرد، حل کنیم.

این ویژگی فقط در حالت Just-in-Time موجود است.

مردم سال‌هاست که این را می‌خواهند و بالاخره رسید! ما پشتیبانی شخص اول را برای استایل کردن عناصر شبه اضافه کرده ایم before و after:

div class="before:block before:bg-blue-500 after:flex after:bg-pink-300">div>

قرار دادیم content: "" به طور خودکار هر بار که از a استفاده می کنید before یا after گزینه ای برای اطمینان از رندر شدن عناصر، اما می توانید با استفاده از new آن را لغو کنید content ابزارهایی که از مقادیر دلخواه پشتیبانی کامل دارند:

div class="before:block before:content-['hello'] ...">div>

حتی می توانید محتوا را از یک ویژگی با استفاده از CSS بگیرید attr() تابع:

div before="hello world" class="before:block before:content-[attr(before)] ...">div>

این می تواند بسیار مفید باشد زمانی که محتوای شما دارای فاصله باشد، زیرا فضاها نمی توانند در نام کلاس های CSS استفاده شوند.

این ویژگی فقط در حالت Just-in-Time موجود است.

ما گزینه هایی را اضافه کردیم first-letter و first-line شبه عناصر، بنابراین می توانید کارهایی مانند کلاهک را انجام دهید:

p class="first-letter:float-left first-letter:text-4xl first-letter:font-bold">  The night was March 31, 1996, and it was finally time for Bret Hart to face off against Shawn Michaels in the long  anticipated Iron Man match — a 60 minute war of endurance where the man who scored the most number of falls would walk  away as the WWF World Heavyweight Champion.p>

این ویژگی فقط در حالت Just-in-Time موجود است.

ما یک مورد جدید اضافه کردیم selection گونه ای که استایل دادن به آن را بسیار آسان می کند و برای مطابقت با طرح شما برجسته شده است:

p class="selection:bg-pink-200">  After nearly a grueling hour of warfare with neither man scoring a fall, Hart locked in the Sharpshooter, his  signature submission hold. As Michaels screamed in pain, the crowd were certain that Hart was about to walk away from  WrestleMania XII as the still-World Heavyweight Champion.p>

ما حتی این تابع را به گونه‌ای ساخته‌ایم که می‌توان آن را روی یک عنصر والد اعمال کرد و به صورت آبشاری به پایین تبدیل شد، بنابراین می‌توانید با اعمال یک ابزار بر روی بدنه، یک رنگ برجسته برای کل سایت خود تنظیم کنید:

body class="selection:bg-pink-200">    p>    But Michaels didn't give up — he held on until the bell rang and the designated 60 minutes was up. Hart walked away    content, thinking that without a clear winner, the title was his to hold. He was not prepared for what would happen    next, when Gorilla Monsoon declared the match would continue under sudden death rules.  p>body>

این ویژگی فقط در حالت Just-in-Time موجود است.

می توانید از جدید استفاده کنید marker گزینه ای برای استایل دادن به گلوله یا اعداد در ابتدای لیست:

h1>WrestleMania XII Resultsh1>ol class="marker:font-medium marker:text-gray-500">  li>The British Bulldog, Owen Hart, and Vader defeated Ahmed Johnson, Jake Roberts, and Yokozunali>  li>Roddy Piper defeated Goldustli>  li>Stone Cold Steve Austin defeated Savio Vegali>  li>The Ultimate Warrior defeated Hunter Hearst Helmsleyli>  li>The Undertaker defeated Dieselli>  li>Shawn Michaels defeated Bret Hartli>ol>

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

این ویژگی فقط در حالت Just-in-Time موجود است.

Tailwind CSS نسخه 2.2 جدید اضافه می کند peer-* انواعی که رفتارشان بسیار شبیه است group-* انواع، اما برای هدف قرار دادن عناصر مرتبط به جای عناصر والد.

این برای مواردی مانند استایل دادن به یک عنصر در هنگام علامت زدن کادر قبلی، انجام کارهایی مانند برچسب‌های شناور و موارد دیگر مفید است:

label>  input type="checkbox" class="peer sr-only" />  span class="h-4 w-4 bg-gray-200 peer-checked:bg-blue-500">      span>label>

درست مثل group می تواند با هر گزینه دیگری ترکیب شود، peer همچنین می توانید، بنابراین شما گزینه هایی مانند peer-hover، peer-focus، peer-disabledو بیشتر در طول بازو بارگیری می کند.

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

.peer:checked ~ .peer-checked\:bg-blue-500 {  background-color: #3b82f6;}

بنابراین درست مانند وانیلی CSS، فقط برای هدف گیری کار می کند قبلی خواهر و برادر، نه خواهر و برادرهایی که بعداً در DOM ظاهر می شوند.

این ویژگی فقط در حالت Just-in-Time موجود است.

ما برای تقریباً هر شبه کلاس گمشده ای که می توانیم در این نسخه فکر کنیم، انواعی اضافه کرده ایم:

• only (تک فرزند)
• first-of-type
• last-of-type
• only-of-type
• target
• default
• indeterminate
• placeholder-shown
• autofill
• required
• valid
• invalid
• in-range
• out-of-range

مورد علاقه شخصی در لیست است placeholder-shown – هنگامی که با انواع جدید انتخابگر خواهر و برادر ترکیب می شود، انجام کارهای جالب مانند برچسب های شناور را ممکن می کند:

div class="relative">  input id="name" class="peer ..." />  label for="name" class="peer-placeholder-shown:top-4 peer-focus:top-0 ..."> Name label>div>

این ویژگی فقط در حالت Just-in-Time موجود است.

به جای استفاده از ابزارهایی مانند bg-opacity-50، text-opacity-25، یا placeholder-opacity-40, Tailwind CSS v2.2 یک کوتاه نویسی با کدورت رنگ جدید به شما می دهد که می توانید از آن برای تغییر کانال آلفای یک رنگ به طور مستقیم در خود ابزار رنگ استفاده کنید:

div class="bg-red-500 bg-opacity-25">div class="bg-red-500/25">div>

این به این معنی است که اکنون می‌توانید تیرگی رنگ‌ها را در هر جایی از Tailwind تغییر دهید، حتی در جایی که قبلاً ابزارهای خاصی برای کدورت مانند گرادیان نداشتیم:

div class="bg-gradient-to-r from-red-500/50">div>

مقادیر opacity از شما گرفته شده است opacity مقیاس، اما می‌توانید از مقادیر opacity دلخواه با استفاده از نماد براکت استفاده کنید:

div class="bg-red-500/[0.31]">div>

صادقانه بگویم، من بیشتر هیجان زده هستم که هرگز نیازی به ایجاد پلاگین اصلی دیگری مانند آن ندارم placeholderOpacity.js برای شما مردم دوباره از من برای استفاده واقعی از این ویژگی. و من واقعاً در مورد این ویژگی هیجان‌زده هستم، بنابراین چیزی می‌گوید.

این ویژگی فقط در حالت Just-in-Time موجود است.

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

شما باید بتوانید از هر مقدار دلخواه خود، تقریباً در هر جایی که می خواهید استفاده کنید:

div class="col-start-[73] object-[50%] placeholder-[#aabbcc] ...">div>

اگر موردی را پیدا کردید که ما از دست داده‌ایم، مشکلی را باز کنید و ما آن را برطرف می‌کنیم.

علاوه بر جامع‌تر کردن پشتیبانی از مقادیر تصادفی، ما همچنین دستور نوع جدیدی را برای مدیریت موقعیت‌های مبهم اضافه کرده‌ایم. به عنوان مثال، اگر از یک متغیر CSS به عنوان یک مقدار دلخواه استفاده کنید، همیشه مشخص نیست که CSS تولید شده باید چه باشد:

div class="text-[var(--mystery-var)]">div>

اکنون می توانید با پیشوند مقدار دلخواه با نام نوع، یک اشاره به موتور ارائه دهید:

div class="text-[color:var(--mystery-var)]">div>

انواع پشتیبانی شده در حال حاضر عبارتند از:

ما احتمالاً در طول زمان این را حتی بیشتر اصلاح خواهیم کرد زیرا افراد لبه‌های جدید را کشف می‌کنند، اما باید شما را بسیار دور کند.

زیرا Tailwind بسیاری از قوانین غیر استاندارد CSS را معرفی می کند @tailwind و @apply، هنگامی که آن را با یک افزونه جاسازی PostCSS ترکیب می کنید، اغلب می توانید با خروجی عجیب و غریب مواجه شوید postcss-nested یا postcss-nesting.

برای کاهش درد در اینجا، ما یک پلاگین جدید PostCSS را در آن قرار داده ایم tailwindcss بسته ای که به عنوان یک لایه سازگاری سبک بین پلاگین های تودرتوی موجود و خود Tailwind عمل می کند.

بنابراین اگر در پروژه خود به پشتیبانی تودرتو نیاز دارید، از افزونه ما استفاده کنید و آن را قبل از Tailwind در لیست پلاگین های PostCSS خود قرار دهید:

// postcss.config.jsmodule.exports = {  plugins: [    // ...    require("tailwindcss/nesting"),    require("tailwindcss"),    // ...  ],};

به طور پیش فرض استفاده می شود postcss-nested زیر کاپوت (زیرا این همان چیزی است که ما برای پشتیبانی از تودرتو در پلاگین های Tailwind استفاده می کنیم)، اما اگر می خواهید استفاده کنید postcss-nesting در عوض، فقط پلاگین ما را به عنوان یک تابع فراخوانی کنید و از آن عبور کنید postcss-nesting افزونه:

// postcss.config.jsmodule.exports = {  plugins: [    // ...    require("tailwindcss/nesting")(require("postcss-nesting")),    require("tailwindcss"),    // ...  ],};

زیر کاپوت این از یک جدید استفاده می کند screen() تابعی را که معرفی کردیم که می‌توانید برای دریافت عبارت رسانه گسترده از هر یک از نقاط شکست پیکربندی شده خود استفاده کنید:

/* Input */@media screen(sm) {  /* ... */}/* Output */@media (min-width: 640px) {  /* ... */}

احتمالاً خودتان نیازی به استفاده از این نخواهید داشت، اما اگر Tailwind را با ابزار دیگری ادغام کنید ممکن است مفید باشد. @media اما کار نمی کند @screen به درستی

@screen sm {@media screen(sm) {  /* ... */}

این ویژگی فقط در حالت Just-in-Time موجود است.

اکنون می توانید رنگ مکان نما را در فیلدهای فرم با استفاده از new تنظیم کنید caret-{color} آب و برق:

input class="caret-red-500" />

آنها را می توان با استفاده از سفارشی سازی کرد caretColor کلید در theme بخش مال شما tailwind.config.js فایل

ما ابزارهای جدید برای background-origin ویژگی که به شما امکان می دهد محل قرارگیری پس زمینه یک عنصر را نسبت به حاشیه، بالشتک یا محتوای عنصر کنترل کنید:

div class="border-4 border-dashed bg-origin-border p-4 ..." style="background-image: url(...)">  Background is rendered under the borderdiv>div class="border-4 border-dashed bg-origin-padding p-4 ..." style="background-image: url(...)">  Background is rendered within the border but on top of any paddingdiv>div class="border-4 border-dashed bg-origin-content p-4 ..." style="background-image: url(...)">  Background is rendered within any padding and under the contentdiv>

در مستندات اصلی مبدا بیشتر بیاموزید.

این ویژگی فقط در حالت Just-in-Time موجود است.

این transform، filter، و backdrop-filter کلاسها دیگر نیازی به “فعال کردن” مجموعه ابزارهای قابل ترکیب مربوطه خود ندارند.

div class="transform scale-50 filter grayscale backdrop-filter backdrop-blur-sm">div class="scale-50 grayscale backdrop-blur-sm">div>

اکنون هر بار که از یکی از برنامه های کاربردی مربوطه استفاده می کنید، این ویژگی ها به طور خودکار فعال می شوند.

با این حال، درک این نکته مهم است که از آنجایی که دیگر به این ابزارهای کمکی نیازی نیست، دیگر نمی‌توانید انتظار داشته باشید که تبدیل‌ها و فیلترها به‌طور پیش‌فرض “خواب” باشند. اگر با جابجایی این کلاس‌ها به «فعال کردن» تبدیل‌ها یا فیلترهای مشروط تکیه کرده‌اید، باید مطمئن شوید که در عوض خود برنامه‌ها را تغییر می‌دهید:

div class="scale-105 -translate-y-1 hover:transform">div class="hover:scale-105 hover:-translate-y-1">div>

من انتظار ندارم که این یک مشکل واقعی برای اکثر مردم باشد، اما از نظر فنی این یک تغییر حیاتی است، به همین دلیل است که ما این پیشرفت را فقط به موتور JIT محدود کرده‌ایم.

این ویژگی فقط در حالت Just-in-Time موجود است.

در چهار سال گذشته حداقل یک بار در ماه درخواست شده است، خوشحالم که به اشتراک بگذارم که ما در نهایت از یک رنگ حاشیه در هر طرف پشتیبانی اضافه کرده‌ایم، حالا که نیازی نیست به اندازه استایل شیت‌های توسعه عرق کنیم.

div class="border-2 border-t-blue-500 border-r-pink-500 border-b-green-500 border-l-yellow-500">  div>

برو جلو و وب سایت های زشت ایجاد کنید! (فقط شوخی کردم، فقط شوخی کردم، می دانم که آنها مفید هستند، خیالتان راحت باشد.)

ما پشتیبانی ممتازی را برای تعدادی از ویژگی‌های مهم PurgeCSS اضافه کرده‌ایم و آنها را در موتور JIT، که در واقع حتی از PurgeCSS هم استفاده نمی‌کند، کار کرده‌ایم.

اولی است safelist، بسیار مفید است اگر بخواهید از کلاس های خاصی در برابر حذف شدن از CSS تولیدی خود محافظت کنید، شاید به این دلیل که در محتوایی که از یک پایگاه داده یا موارد مشابه استفاده می شود:

module.exports = {  purge: {    content: ["./src/**/*.html"],    safelist: [      "bg-blue-500",      "text-center",      "hover:opacity-100",      // ...      "lg:text-right",    ],  },  // ...};

توجه داشته باشید که در حالی که موتور کلاسیک در اینجا عبارات منظم را می پذیرد، موتور JIT نمی پذیرد. این به این دلیل است که وقتی کلاس‌ها را براساس تقاضا تولید می‌کنیم، کلاس تا زمانی که از آن استفاده نشود وجود ندارد، بنابراین چیزی برای مقایسه عبارت نداریم. بنابراین اگر از حالت به‌موقع استفاده می‌کنید، مطمئن شوید که نام کلاس‌ها را کامل ارائه کرده‌اید تا نتیجه مورد انتظار را به دست آورید.

این بعدی است transform، که به شما امکان می دهد قبل از اسکن کردن آن برای نام کلاس های بالقوه، محتوا را برای پسوندهای مختلف تغییر دهید:

let remark = require("remark");module.exports = {  purge: {    content: ["./src/**/*.{html,md}"],    transform: {      md: (content) => {        return remark().process(content);      },    },  },  // ...};

اگر قالب هایی دارید که به زبانی نوشته شده اند که به HTML کامپایل می شوند، مانند Markdown، این واقعا مفید است.

بالاخره داریم extract، که به شما امکان می دهد منطقی که Tailwind برای شناسایی نام کلاس ها در انواع فایل های خاص استفاده می کند، سفارشی کنید:

module.exports = {  purge: {    content: ["./src/**/*.{html,md}"],    extract: {      pug: (content) => {        return /[^"'`\s]*/.match(content);      },    },  },  // ...};

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

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

برای ارتقاء به Tailwind CSS v2.2، آخرین نسخه را از npm نصب کنید:

npm install -D tailwindcss@latest

اگر از پیش‌نمایش حالت Just-in-Time استفاده می‌کنید، می‌خواهید تغییرات و حذف‌های موجود در یادداشت‌های انتشار را نیز بخوانید.

برای ارتقا آماده هستید؟ آن را از npm دریافت کنید →