Tailwind CSS v3.0 – Tailwind CSS

Tailwind CSS نسخه 3.0 اینجاست – دستاوردهای عملکردی باورنکردنی، پیشرفت‌های عظیم گردش کار و تعداد واقعاً نامعقول ویژگی‌های جدید را به ارمغان می‌آورد.

برای گشت و گذار در برخی از جالب ترین ویژگی های جدید، بررسی کنید ویدیوی “چیزهای جدید در Tailwind CSS v3.0” در YouTube ما
کانال

Tailwind CSS نسخه 3.0 قرار است هیجان انگیزترین نسخه ما باشد، از جمله بهبودهایی مانند:

• درست به موقع، همیشه – زمان ساخت سریع رعد و برق، قابل انباشته شدن
  انواع، پشتیبانی از مقادیر دلخواه، عملکرد بهتر مرورگر و موارد دیگر.
• هر رنگ خارج از جعبه – از جمله کل پالت توسعه یافته
  رنگ هایی مانند فیروزه ای، رز، فوشیا و لیمویی و پنجاه سایه ~~ خاکستری~~ خاکستری.
• سایه های رنگی در یک جعبه – برای درخشش سرگرم کننده و جلوه های بازتاب و طبیعی تر
  سایه ها روی پس زمینه رنگارنگ
• Scroll snap API – مجموعه ای جامع و قابل ترکیب از ابزارهای فقط CSS
  رهگیری اسکرول
• طرح‌بندی چند ستونی – بنابراین می‌توانید در نهایت روزنامه آنلاینی را که دارید ایجاد کنید
  خواب دیدم
• سبک طبیعی برای کنترل های فرم – قرار دادن چک باکس ها، دکمه های رادیویی و
  فایل های ورودی بدون اختراع مجدد چرخ با برند شما مطابقت دارند.
• اصلاح کننده چاپ – کنترل کنید که وقتی شخصی سایت شما را چاپ می کند، دقیقاً از روی آن چگونه به نظر می رسد
  HTML شما
• API نسبت ابعاد مدرن – بدون نیاز به هک padding، مگر در موارد ضروری
  سافاری 14 را پشتیبانی کنید، که احتمالاً انجام می دهید، اما همچنان.
• سبک های برجسته سازی فانتزی – بخش گمشده ایجاد این پروژه جانبی
  مال شما بالاخره بلند شد
• اصلاح کننده های RTL و LTR – برای کنترل کامل ساخت
  وب سایت های چند جهته
• اصلاح‌کننده‌های پرتره و منظره – صادقانه بگویم، فقط به این دلیل
  اضافه کردن واقعا آسان بود
• ویژگی‌های دلخواه – Tailwind اکنون از ویژگی‌های CSS پشتیبانی می‌کند که ما هرگز نداشتیم
  شنیده شده است.
• پخش CDN – موتور جدید Just-in-Time در یک اسکریپت CDN فشرده شده است که درست در
  مرورگر.
• هزاران ابزار دیگر – از جمله پشتیبانی از عمل لمسی، تغییر اراده، مبتنی بر انعطاف، تورفتگی متن، اسکرول رفتار و موارد دیگر.

به‌علاوه یک وب‌سایت مستند جدید زیبا و جذاب که با محتوای بهبودیافته و نمونه‌هایی در هر صفحه بارگذاری شده است.

برای شروع بازی با Tailwind CSS v3.0 امروز، آخرین نسخه را از npm بگیرید:

npm install -D tailwindcss@latest postcss autoprefixer

… یا به Tailwind Play بروید تا آخرین ویژگی ها را مستقیماً در مرورگر امتحان کنید.

Tailwind CSS v3.0 یک نسخه اصلی جدید از چارچوب است و تغییرات جزئی وجود دارد، اما ما بسیار سخت کار کرده‌ایم تا فرآیند ارتقا را تا حد امکان روان کنیم و برای اکثر پروژه‌ها باید بتوانید نسخه 3.0 را بدون ایجاد تغییر نصب کنید.

به عنوان مثال، رابط کاربری Tailwind احتمالاً بزرگترین پروژه Tailwind روی زمین است و هر قالب کاملاً با نسخه 2 و 3 سازگار است و نیازی به تغییر نیست.

برای جزئیات بیشتر و دستورالعمل های گام به گام مهاجرت به نسخه 3.0، راهنمای ارتقا را ببینید.

در ماه مارس، موتور کاملاً جدید Just-in-Time را معرفی کردیم که دستاوردهای عملکردی عظیمی را به ارمغان آورد، ویژگی‌های جدید هیجان‌انگیزی مانند مقادیر تصادفی را باز کرد، و پیکربندی‌های مختلف پیچیده را به چیزی از گذشته تبدیل کرد.

در Tailwind CSS v3.0، موتور جدید پایدار است و جایگزین موتور کلاسیک می شود، بنابراین هر پروژه Tailwind می تواند فوراً از این پیشرفت ها بهره مند شود.

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

در نسخه 3.0، هر رنگ در پالت رنگ توسعه یافته به طور پیش فرض فعال است، از جمله لیمویی، فیروزه ای، آسمانی، فوشیا، رز و پنجاه سایه خاکستری.

برای کسب اطلاعات بیشتر به مرجع پالت رنگ مراجعه کنید.

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

پس از حدود پنج شروع نادرست، در نهایت به رویکردی رسیدیم که دوست داشتیم، و اکنون Tailwind CSS نسخه 3.0 شامل سایه های رنگی است:

button class="bg-cyan-500 shadow-lg shadow-cyan-500/50 ...">Subscribebutton>button class="bg-blue-500 shadow-lg shadow-blue-500/50 ...">Subscribebutton>button class="bg-indigo-500 shadow-lg shadow-indigo-500/50 ...">Subscribebutton>

در مستندات Box Shadow Color بیشتر بیاموزید.

ما مجموعه ای جامع از ابزارهای کاربردی را برای ماژول CSS Scroll Snap اضافه کرده ایم که به شما این قدرت را می دهد تا تجربیات اسکرول بسیار غنی را مستقیماً در HTML خود ایجاد کنید:

div class="snap-x ...">  div class="snap-center ...">    img src="https://images.unsplash.com/photo-1604999565976-8913ad2ddb7c?auto=format&fit=crop&w=320&h=160&q=80" />  div>  div class="snap-center ...">    img src="https://images.unsplash.com/photo-1540206351-d6465b3ac5c1?auto=format&fit=crop&w=320&h=160&q=80" />  div>  div class="snap-center ...">    img src="https://images.unsplash.com/photo-1622890806166-111d7f6c7c97?auto=format&fit=crop&w=320&h=160&q=80" />  div>  div class="snap-center ...">    img src="https://images.unsplash.com/photo-1590523277543-a94d2e4eb00b?auto=format&fit=crop&w=320&h=160&q=80" />  div>  div class="snap-center ...">    img src="https://images.unsplash.com/photo-1575424909138-46b05e5919ec?auto=format&fit=crop&w=320&h=160&q=80" />  div>  div class="snap-center ...">    img src="https://images.unsplash.com/photo-1559333086-b0a56225a93c?auto=format&fit=crop&w=320&h=160&q=80" />  div>div>

با ابزارهای جدید Scroll Margin شروع کنید و کل API را طی کنید تا بیشتر بدانید.

ما پشتیبانی از ستون‌ها را اضافه کرده‌ایم – نوعی طرح‌بندی روزنامه. آنها در واقع برای مواردی مانند طرح‌بندی پیمایش پاورقی بسیار مفید و عالی هستند.

div class="columns-1 sm:columns-3 ...">  p>...p>  div>

در مستندات ستون‌ها بیشتر بیاموزید – و ابزارهای جدید بعد از/در/قبل از استراحت را نیز بررسی کنید.

ما پشتیبانی از ویژگی جدید accent-color را اضافه کرده‌ایم، و همچنین یک اصلاح کننده استایل برای دکمه‌های ورودی فایل اضافه کرده‌ایم تا اعمال لمس خود را بر روی کنترل‌های فرم سفارشی آسان‌تر از همیشه کنیم:

form>  div class="flex items-center space-x-6">    div class="shrink-0">      img        class="h-16 w-16 rounded-full object-cover"        src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1361&q=80"        alt="Current profile photo"      />    div>    label class="block">      span class="sr-only">Choose profile photospan>      input        type="file"        class="block w-full text-sm text-slate-500 file:mr-4 file:rounded-full file:border-0 file:bg-violet-50 file:py-2 file:text-sm file:font-semibold file:text-violet-700 hover:file:bg-violet-100"      />    label>  div>  label class="mt-6 flex items-center justify-center space-x-2 text-sm font-medium text-slate-600">    input type="checkbox" class="accent-violet-500" checked />    span>Yes, send me all your stupid updatesspan>  label>form>

در اسناد رنگ هایلایت و دکمه های ورودی فایل بیشتر بیاموزید.

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

div>  article class="print:hidden">    h1>My Secret Pizza Recipeh1>    p>This recipe is a secret, and must not be shared with anyonep>      article>  div class="hidden print:block">Are you seriously trying to print this? It's secret!div>div>

من می گویم “در مستندات سبک چاپ بیشتر بیاموزید” اما این درست نیست.

پشتیبانی برای بومی جدید اضافه شده است aspect-ratio ویژگی که شروع به مشاهده پشتیبانی کامل مرورگر می کند:

iframe class="aspect-video w-full ..." src="https://www.youtube.com/...">iframe>

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

اکنون می توانید رنگ هایلایت، ضخامت و موارد دیگر را تغییر دهید:

p>  I’m Derek, an astro-engineer based in Tatooine. I like to build X-Wings at  a href="#" class="underline decoration-sky-500 decoration-2"> My Company, Inc a>. Outside of work, I like to{" "}  a href="#" class="underline decoration-pink-500 decoration-dotted decoration-2"> watch pod-racing a> and have  a href="#" class="underline decoration-indigo-500 decoration-wavy decoration-2"> light-saber a>{" "} fights.p>

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

ما پشتیبانی آزمایشی را برای طرح‌بندی‌های چند جهته با جدید اضافه کرده‌ایم rtl و ltr اصلاح کننده ها:

از چپ به راست

تام کوک

مدیر عملیات

از راست به چپ

تامر کرم

مدیر اجرایی

div class="group flex items-center">  img class="h-12 w-12 shrink-0 rounded-full" src="..." alt="" />  >  div class="ltr:ml-3 rtl:mr-3">    p class="text-sm font-medium text-slate-700 group-hover:text-slate-900">...p>    p class="text-sm font-medium text-slate-500 group-hover:text-slate-700">...p>  div>div>

در اسناد پشتیبانی RTL بیشتر بیاموزید.

از جدید استفاده کنید portrait و landscape اصلاح‌کننده‌ها برای اضافه کردن مشروط استایل‌ها زمانی که viewport در یک جهت خاص است:

div>  div class="portrait:hidden">      div>  div class="landscape:hidden">    p>This experience is designed to be viewed in landscape. Please rotate your device to view the site.p>  div>div>

مستندات این ویژگی حتی محتوای کمتری نسبت به این بخش از این پست دارد.

این ممکن است غیرقانونی باشد، اما ما امکان افزودن CSS کاملاً دلخواه را فراهم کرده‌ایم که می‌توانید آن را با اصلاح‌کننده‌هایی مانند ترکیب کنید. hover، lgو چه چیز دیگری:

div class="[mask-type:luminance] hover:[mask-type:alpha]">  div>

این همان چیزی است که استایل های درون خطی وقتی بزرگ می شوند می خواهند باشند. در اسناد املاک دلخواه بیشتر بیاموزید.

هیچ راهی برای ساخت یک CDN مبتنی بر CSS معقول برای Tailwind CSS نسخه 3.0 وجود ندارد، بنابراین باید کاری متفاوت انجام می‌دادیم – یک کتابخانه جاوا اسکریپت ایجاد کردیم.

DOCTYPE html>html lang="en">  head>    meta charset="utf-8" />    meta name="viewport" content="width=device-width, initial-scale=1.0" />    title>Exampletitle>    script src="https://cdn.tailwindcss.com/">script>  head>  body>      body>html>

این تگ اسکریپت را به هر سند HTML اضافه کنید و می توانید از هر ویژگی Tailwind درست در مرورگر استفاده کنید. این فقط برای اهداف توسعه است، اما مطمئناً یک راه سرگرم کننده برای ساخت دموهای کوچک یا هک یک ایده جدید است.

در مستندات Play CDN بیشتر بیاموزید.

اینجاست – Tailwind CSS v3.0! برای شروع امروز به سایت اسناد جدید سر بزنید.

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