Tailwind CSS نسخه 3.3: پالت رنگ گسترده، پشتیبانی ESM/TS، ویژگی های منطقی و موارد دیگر.

Tailwind CSS نسخه 3.3 اینجاست – مجموعه‌ای از ویژگی‌های جدید را که مردم برای همیشه از آن‌ها خواسته‌اند، و دسته‌ای از چیزهای جدید که هرگز نمی‌دانستید می‌خواهید به ارمغان می‌آورد.

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

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

npm install -D tailwindcss@latest

همچنین می‌توانید تمام ویژگی‌های جدید Tailwind Play را مستقیماً در مرورگر خود امتحان کنید.

یکی از متداول‌ترین درخواست‌های ویژگی که در طول سال‌ها داشته‌ایم، اضافه کردن سایه‌های تیره‌تر برای هر رنگ است – معمولاً به این دلیل که شخصی در حال ساخت یک رابط کاربری تیره است و فقط گزینه‌های بیشتری را در آن انتهای تاریک طیف می‌خواهد.

آرزو برآورده شد – در Tailwind CSS نسخه 3.3 ما یک نسخه جدید اضافه کردیم 950 سایه برای هر رنگ

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

و در بقیه طیف رنگ، ما بهینه سازی کردیم 950 برای متن با کنتراست بالا و پس زمینه های کنترل رنگی:

باور کنید یا نه، سخت ترین بخش این پروژه این بود که خودمان را متقاعد کنیم که با 11 سایه رنگ مشکلی نداریم. تلاش برای خوب جلوه دادن این موضوع در اسناد پالت رنگ یک کابوس بود.

همچنین یکی از جوک‌های 50 Shades of Grey را که می‌توانیم درست کنیم، بریزید.

اکنون می توانید CSS Tailwind را در ESM یا حتی در TypeScript پیکربندی کنید:

/** @type {import('tailwindcss').Config} */export default {  content: [],  theme: {    extend: {},  },  plugins: [],};

وقتی می دوی npx tailwindcss init، ما تشخیص خواهیم داد که آیا پروژه شما یک ماژول ES است و به طور خودکار فایل پیکربندی شما را با نحو صحیح تولید می کنیم.

شما همچنین می توانید یک فایل پیکربندی ESM را به صراحت با استفاده از آن ایجاد کنید --esm پرچم:

npx tailwindcss init --esm

برای ایجاد یک فایل پیکربندی TypeScript، از --ts پرچم:

npx tailwindcss init --ts

بسیاری از مردم تصور می کنند که این کار آسان است زیرا قبلاً کد خود را در ESM می نویسند (حتی اگر توسط ابزار ساخت آنها ترجمه شده باشد)، اما در واقع بسیار پیچیده است – ما به معنای واقعی کلمه باید فایل پیکربندی را برای شما در حال ترانسفیل کردن کنیم.

وقتی به مورد TypeScript فکر می کنید، فهمیدن اینکه چرا باید این اتفاق بیفتد کمی ساده تر است، زیرا البته Tailwind به صورت جاوا اسکریپت توزیع شده است و نمی تواند به طور جادویی یک فایل TypeScript کامپایل نشده را وارد کند.

ما این کار را با کتابخانه فوق‌العاده jiti در زیر کاپوت مدیریت می‌کنیم و از Sucrase برای انتقال کد با بهترین عملکرد ممکن و در عین حال کوچک نگه داشتن ردپای نصب استفاده می‌کنیم.

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

استفاده از ابزارهای جدید مانند ms-3 و me-3، می توانید استایل دهید شروع کنید و پایان در هر عنصر به طوری که سبک های شما به طور خودکار به جای نوشتن کد مانند، در RTL تطبیق می یابند ltr:ml-3 rtl:mr-3:

از چپ به راست

تام کوک

مدیر عملیات

از راست به چپ

تامر کرم

مدیر اجرایی

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">    div class="ms-3">      p        class="text-sm font-medium text-slate-700 group-hover:text-slate-900"        dark-class="text-sm font-medium text-slate-300 group-hover:text-white"      >        ...      p>      p        class="text-sm font-medium text-slate-500 group-hover:text-slate-700"        dark-class="text-sm font-medium text-slate-500 group-hover:text-slate-300"      >        ...      p>    div>  div>div>

ما ابزارهای جدیدی را برای ویژگی های منطقی inset، margin، pad، border-radius، scroll-margin و scroll-pad اضافه کرده ایم.

در اینجا لیست کاملی از تمام ابزارهای جدید اضافه شده و مواردی که آنها در مورد آنها اعمال می شوند آمده است:

اگر به طور منظم سایت هایی می سازید که نیاز به پشتیبانی از زبان های LTR و RTL دارند، باید مقدار زیادی کد را برای شما ذخیره کنند و همیشه می توانید آنها را با ltr و rtl گزینه های زمانی که به کنترل بیشتری نیاز دارید.

ما ابزارهای جدید مانند from-5%، via-35%، و to-85% که به شما امکان می دهد موقعیت واقعی هر توقف رنگ را در شیب های خود تنظیم کنید:

div class="bg-gradient-to-r from-indigo-500 from-10% via-purple-500 via-30% to-pink-500 to-90% ...">  div>

ما هر مقدار از 0٪ تا 100٪ را در مراحل 5 از جعبه قرار داده ایم، اما مطمئناً می توانید از مقادیر دلخواه استفاده کنید تا دقیقاً اثر مورد نظر خود را بدست آورید:

div class="bg-gradient-to-r from-cyan-400 from-[21.56%] ...">  div>

برای جزئیات بیشتر، به مستندات Gradient Color Brakes مراجعه کنید.

ما افزونه رسمی سفت کردن خط خود را کمی بیش از دو سال پیش منتشر کردیم، و اگرچه از تعداد زیادی از قدیمی‌های عجیب و غریب استفاده می‌کند. -webkit-* چیزهای دیگر، آن را در هر مرورگری کار می کند و برای همیشه کار خواهد کرد، بنابراین ما تصمیم گرفتیم آن را فقط در چارچوب خود بچسبانیم.

10 مارس 2020

نرخ تبدیل خود را افزایش دهید

Nulla dolor velit adipisicing duis استثناeur esse in duis nostrud occaecat mollit incididunt deserunt sunt. Ut ut sunt laborum ex occaecat eu tempor labore enim adipisecing minim ad. Est in quis eu dolore occaecat osimeur fugiat dolore nisi aliqua fugiat enim ut cillum. Labore enim duis nostrud eu. Est ut eiusmod consequat irure quis deserunt ex. Enim laboris dolor magna pariatur. Dolor et ad sint voluptate sunt elit mollit officia ad enim sit consectetur enim.

لیندسی والتون

article>  div>    time datetime="2020-03-16" class="block text-sm/6 text-gray-600">Mar 10, 2020time>    h2 class="mt-2 text-lg font-semibold text-gray-900">Boost your conversion rateh2>    >    p class="mt-4 line-clamp-3 text-sm/6 text-gray-600">      Nulla dolor velit adipisicing duis excepteur esse in duis nostrud occaecat mollit incididunt deserunt sunt. Ut ut      sunt laborum ex occaecat eu tempor labore enim adipisicing minim ad. Est in quis eu dolore occaecat excepteur      fugiat dolore nisi aliqua fugiat enim ut cillum. Labore enim duis nostrud eu. Est ut eiusmod consequat irure quis      deserunt ex. Enim laboris dolor magna pariatur. Dolor et ad sint voluptate sunt elit mollit officia ad enim sit      consectetur enim.    p>  div>  div class="mt-4 flex gap-x-2.5 text-sm leading-6 font-semibold text-gray-900">    img src="..." class="h-6 w-6 flex-none rounded-full bg-gray-50" />    Lindsay Walton  div>article>

بنابراین، وقتی به نسخه 3.3 ارتقا می‌دهید، می‌توانید با خیال راحت پلاگین line clamp را حذف کنید اگر از آن استفاده کرده‌اید:

module.exports = {  // ...  plugins: [    require('@tailwindcss/line-clamp')   ]}

اجازه ندهید در راه خروج، پلاگین به شما ضربه بزند.

اگر قبلاً با آن بازی نکرده‌اید، مستندات جدید Line Clamping را بررسی کنید تا درباره نحوه کارکرد آن بیشتر بدانید.

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

ما با الهام از نحو اصلاح کننده کدورت رنگ خود، تصمیم گرفتیم که ذخیره چندین کاراکتر را با کنار هم قرار دادن آنها با یک ابزار واحد امکان پذیر کنیم:

p class="text-lg leading-7 ...">p class="text-lg/7 ...">  So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way  past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living  things but I tell you Jerry at that moment, I em>wasem> a marine biologist.p>

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

p class="text-sm/[17px] ...">p>

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

با روحیه تایپ کمتر، امکان پرش را نیز فراهم کرده ایم var() هنگام استفاده از یک متغیر CSS به عنوان یک مقدار دلخواه:

export function MyComponent({ company }) {  return (    div      style={{        "--brand-color": company.brandColor,        "--brand-hover-color": company.brandHoverColor,      }}      className="bg-[var(--brand-color)] hover:bg-[var(--brand-hover-color)]"      className="bg-[--brand-color] hover:bg-[--brand-hover-color]"    />  );}

این یک ترفند بسیار جالب برای استفاده از چیزهایی مانند است hover: با سبک هایی که از پایگاه داده یا چیز دیگری می آیند.

هنگام استفاده از فونت های سفارشی، اغلب می خواهید مواردی مانند پیکربندی کنید font-feature-settings یا font-variation-settings برای انتخاب تنظیمات خاصی که فونت ارائه می دهد.

ما آن را آسان کرده ایم font-feature-settings برای مدتی، اما اکنون می توانید همین کار را با font-variation-settings با ارائه یک مقدار برای آن در شی optionsort، که می توانید آن را بعد از لیست فونت در فایل پیکربندی خود قرار دهید:

module.exports = {  theme: {    fontFamily: {      sans: [        "Inter var, sans-serif"        {          fontFeatureSettings: '"cv11", "ss01"',          fontVariationSettings: '"opsz" 32',        },      ],    },  },};

در مثال بالا، ما از نسخه اخیر Inter استفاده می کنیم که از محور نوری اندازه برای فعال کردن نوع “نمایش” فونت، بهینه سازی شده برای اندازه های بزرگتر مانند عناوین، پشتیبانی می کند.

آیا تا به حال می خواهید از یک تصویر هویج به عنوان برچسب برای یک آیتم در لیست خود استفاده کنید؟ خوب، حالا شما می توانید، با یکی جدید list-image-* آب و برق

ul class="list-image-[url(/carrot.png)] ...">  li>5 cups chopped Porcini mushroomsli>  ul>

ما شروع به ارائه گرافیک گیاهی با قاب نمی کنیم، اما می توانید از هر تصویری که می خواهید به عنوان یک مقدار تصادفی استفاده کنید یا آن را در آن پیکربندی کنید. listStyleImage بخشی از موضوع شما

برای کسب اطلاعات بیشتر، مستندات تصویر سبک فهرست را بررسی کنید.

تا به حال شنیده شده است ­ شی HTML؟ من هم این کار را نکردم تا اینکه پشتیبانی از آنها را اضافه کردیم hyphens-* آب و برق

استفاده hyphens-manual و با دقت قرار داده شده است ­، می توانید به مرورگر بگویید که در صورت نیاز به تقسیم یک کلمه به چندین خط، یک خط فاصله را در کجا قرار دهد:

p class="hyphens-manual ...">... Kraftfahrzeug­haftpflichtversicherung is a ...p>

شاید یک قطعه کد مانند این مفید باشد که به عنوان بخشی از کیت مطبوعاتی گروه دث متال غیرقابل تلفظ شما قرار گیرد تا روزنامه نگاران خط فاصله در مقاله را که در نهایت شما را وارد صحنه می کند، خراب نکنند.

برای کسب اطلاعات بیشتر، مستندات خط فاصله را بررسی کنید.

یکی دیگر از جدید برای من –

table>  caption class="caption-bottom">    Table 3.1: Professional wrestlers and their signature moves.  caption>  thead>    tr>      th>Wrestlerth>      th>Signature Move(s)th>    tr>  thead>  tbody>    tr>      td>"Stone Cold" Steve Austintd>      td>Stone Cold Stunner, Lou Thesz Presstd>    tr>    tr>      td>Bret "The Hitman" Harttd>      td>The Sharpshootertd>    tr>    tr>      td>Razor Ramontd>      td>Razor's Edge, Fallaway Slamtd>    tr>  tbody>table>

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

بنابراین Tailwind CSS نسخه 3.3 است! بدون تغییرات اساسی، فقط یک سری چیزهای جدید سرگرم کننده. امروز با به روز رسانی به آخرین نسخه با npm آن را در پروژه های خود امتحان کنید:

npm install -D tailwindcss@latest

بله، یک نسخه دیگر بدون text-shadow آب و برق آن قسمت از Seinfeld را به خاطر دارید که در آن کرامر سعی می کند ببیند که چقدر می تواند بدون توقف برای بنزین رانندگی کند؟ این قسمت مورد علاقه من است.