Tailwind CSS v1.7.0 – Tailwind CSS

یک نسخه جدید دیگر از Tailwind اینجاست! این بار با پشتیبانی از گرادیان، کلیپ پس زمینه، پشتیبانی آزمایشی برای استفاده @apply با ابزارهای مختلف و بسیاری دیگر. بیایید حفاری کنیم!

گرادیان ها

نکته مهم در مورد این نسخه – Tailwind اکنون با پشتیبانی داخلی برای گرادیان پس‌زمینه عرضه می‌شود!

گرادیان ها با یک API بسیار قابل ترکیب طراحی شده اند که به شما امکان می دهد تا سه توقف رنگ را در یکی از 8 جهت پیش فرض تنظیم کنید:

div class="bg-gradient-to-r from-orange-400 via-red-500 to-pink-500">  div>

این به لطف جدید امکان پذیر شده است backgroundImage پلاگین اصلی (که می توانید برای هر تصویر پس زمینه ای که دوست دارید استفاده کنید!) و جدید gradientColorStops پلاگین اصلی

پیکربندی پیش فرض این افزونه ها به صورت زیر است:

module.exports = {  theme: {    backgroundImage: {      "gradient-to-t": "linear-gradient(to top, var(--gradient-color-stops))",      "gradient-to-tr": "linear-gradient(to top right, var(--gradient-color-stops))",      "gradient-to-r": "linear-gradient(to right, var(--gradient-color-stops))",      "gradient-to-br": "linear-gradient(to bottom right, var(--gradient-color-stops))",      "gradient-to-b": "linear-gradient(to bottom, var(--gradient-color-stops))",      "gradient-to-bl": "linear-gradient(to bottom left, var(--gradient-color-stops))",      "gradient-to-l": "linear-gradient(to left, var(--gradient-color-stops))",      "gradient-to-tl": "linear-gradient(to top left, var(--gradient-color-stops))",    },    gradientColorStops: (theme) => theme("colors"),  },  variants: {    backgroundImage: ["responsive"],    gradientColorStops: ["responsive", "hover", "focus"],  },};

با درخواست دانلود اصلی بیشتر آشنا شوید.

ابزارهای جدید برای کلیپ های پس زمینه

ما همچنین یک مورد جدید اضافه کردیم backgroundClip یک پلاگین اولیه که می توانید برای کنترل نحوه رندر شدن پس زمینه در یک عنصر از آن استفاده کنید.

این شامل 4 ابزار جدید است:

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

h1 class="text-center text-5xl font-bold">  span class="bg-gradient-to-r from-teal-400 to-blue-500 bg-clip-text text-transparent">    Greetings from Tailwind v1.7.  span>h1>

فقط انواع تطبیقی برای فعال هستند backgroundClip افزونه پیش فرض:

module.exports = {  variants: {    backgroundClip: ["responsive"],  },};

نام مستعار ابزار جدید پاس

به دلایل احمقانه ای به او زنگ زدم column-gap و row-gap آب و برق col-gap-{n} و row-gap-{n} به ترتیب، که وحشتناک نیست، اما با نحوه نامگذاری چیزهای دیگر در Tailwind همخوانی ندارد.

من متوجه شدم که همیشه آنها را اشتباه می کنم – خوب row-gap شکاف خط یا شکاف خط؟

Tailwind v1.7 جدید را معرفی می کند gap-x-{n} و gap-y-{n} برنامه‌هایی که دقیقاً همین کار را انجام می‌دهند، اما نام‌های بدی ندارند. اکنون که شکاف flexbox نیز شروع به نمایان شدن کرده است، آنها بسیار بیشتر از نام‌های CSS واقعی هستند زیرا flexbox “ستون” ندارد.

این ابزارها جایگزین ابزارهای قدیمی در نسخه 2.0 خواهند شد، اما در حال حاضر هر دو با هم وجود دارند.

توصیه می کنیم اکنون به نام های جدید مهاجرت کنید و نام های قدیمی را با استفاده از این پرچم ویژگی غیرفعال کنید:

module.exports = {  future: {    removeDeprecatedGapUtilities: true,  },  // ...};

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

جدید contents ابزار نمایش

ما یک مورد جدید اضافه کردیم contents کلاس برای دومی display: contents تابع CSS.

div class="flex">  div>div>    div class="contents">    div>div>    div>div>  div>  div>div>div>

در این مقاله عالی توسط ریچل اندرو در مورد آن بیشتر بدانید.

فاصله پیش‌فرض برای هر اندازه فونت

اکنون می توانید یک مقدار پیش فرض برای فاصله حروف برای هر اندازه فونت در خود پیکربندی کنید tailwind.config.js موضوع با استفاده از سینتکس تاپل:

module.exports = {  theme: {    fontSize: {      2xl: ['24px', {        letterSpacing: '-0.01em',      }],      // Or with a default line-height as well      3xl: ['32px', {        letterSpacing: '-0.02em',        lineHeight: '40px',      }],    }  }}

این نحو جدید علاوه بر دستور ساده‌تر، پشتیبانی می‌شود [{fontSize}, {lineHeight}] نحوی که اخیرا معرفی شده است.

سبک های حاشیه جدا

ما ابزارهای کمکی را برای تنظیم سبک حاشیه اضافه کرده ایم divide آب و برق:

div class="divide-y divide-dashed">  div>div>  div>div>  div>div>  div>div>div>

این ابزارهای کمکی عبارتند از responsive گزینه های پیش فرض:

module.exports = {  variants: {    divideStyle: ["responsive"],  },};

از پلاگین ها به کل شی پیکربندی دسترسی پیدا کنید

را config تابع ارسال شده به API پلاگین اکنون کل گزینه پیکربندی را در صورت فراخوانی بدون آرگومان برمی گرداند:

tailwind.plugin(function ({ config, addUtilities, /* ... */ })) {  // Returns entire config object  config()})

رنگ ها را به عنوان بسته تعریف کنید

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

این به ویژه زمانی مفید است که سعی کنید رنگ های سفارشی خود را با آنها کار کنید backgroundOpacity، textOpacityو غیره

module.exports = {  theme: {    colors: {      primary: ({ opacityVariable }) => `rgba(var(--color-primary), var(${variable}, 1))`,    },  },};

در حال حاضر تنها چیزی که از آن عبور می شود یک است opacityVariable خاصیت حاوی نام متغیر opacity فعلی (--background-opacity، --text-opacityو غیره) بسته به اینکه کدام افزونه از رنگ استفاده می کند.

Tailwind نسخه 1.7 یک سیستم پرچم‌گذاری و حذف ویژگی جدید را معرفی می‌کند که برای ارتقا تا حد امکان بدون دردسر طراحی شده است.

هر زمان که عملکرد را بازنشسته کنیم یا تغییرات جدید (پایدار) جدیدی را معرفی کنیم، آنها در Tailwind v1.x در زیر در دسترس خواهند بود. future دارایی در شما tailwind.config.js فایل

هر زمان که تغییراتی در دسترس باشد، Tailwind در کنسول در هر بیلد به شما هشدار می دهد تا زمانی که تغییرات جدید را بپذیرید و پرچم را در فایل پیکربندی خود فعال کنید:

risk - There are upcoming breaking changes: removeDeprecatedGapUtilitiesrisk - We highly recommend opting-in to these changes now to simplify upgrading Tailwind in the future.risk - https://tailwindcss.com/docs/upcoming-changes

می‌توانید با تنظیم این پرچم روی یک تغییر حیاتی شرکت کنید true در مال شما tailwind.config.js فایل:

module.exports = {  future: {    removeDeprecatedGapUtilities: true,  },};

اگر ترجیح می‌دهید شرکت نکنید اما می‌خواهید هشدار را بی‌صدا کنید، پرچم را به صراحت روی آن تنظیم کنید false:

module.exports = {  future: {    removeDeprecatedGapUtilities: false,  },};

ما این را توصیه نمی کنیم، زیرا ارتقاء به Tailwind v2.0 را دشوار می کند.

ابزارهای منسوخ شکاف

همانطور که قبلا ذکر شد، Tailwind v1.7.0 جدید را معرفی می کند gap-x-{n} و gap-y-{n} آب و برق برای جایگزینی فعلی col-gap-{n} و row-gap-{n} آب و برق

به طور پیش فرض، هر دو کلاس وجود خواهند داشت، اما ابزارهای قدیمی در Tailwind نسخه 2.0 حذف خواهند شد.

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

div class="col-gap-4 row-gap-2 ...">div class="gap-x-4 gap-y-2 ...">div>

برای پیوستن به نام های جدید، فعال کنید removeDeprecatedGapUtilities پرچم در شما tailwind.config.js فایل:

module.exports = {  future: {    removeDeprecatedGapUtilities: true,  },};

Tailwind v1.7.0 یک سیستم ویژگی آزمایشی جدید را معرفی می کند که به شما امکان می دهد عملکرد جدیدی را انتخاب کنید که به زودی برای Tailwind ارائه می شود، اما هنوز کاملاً پایدار نیست.

توجه به این نکته ضروری است ویژگی‌های آزمایشی ممکن است تغییرات مهمی ایجاد کنند، از semver پیروی نکنند و ممکن است در هر زمانی تغییر کنند.

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

module.exports = {  experimental: "all",};

با وجود این موضوع، در اینجا برخی از چیزهای سرگرم کننده ای است که ما روی آنها کار کرده ایم و خوشحالیم که شما در نهایت با آنها بازی کنید…

از آن استفاده کنید @apply با انواع و کلاس های پیچیده دیگر

این بسیار بزرگ است – در نهایت می توانید از آن استفاده کنید @apply با انواع پاسخگو، انواع شبه کلاس و سایر کلاس های پیچیده!

.btn {  @apply bg-indigo hover:bg-indigo-700 sm:text-lg;}

جزئیات زیادی برای درک این مورد وجود دارد، بنابراین توصیه می‌کنم درخواست دانلود را بخوانید تا بدانید که چگونه همه کار می‌کند.

این تغییرات انقلابی را در چگونگی معرفی می کند @apply قبلاً کار می کرد، بنابراین قبل از اینکه سوئیچ را بچرخانید، حتماً تمام جزئیات را بخوانید.

برای فعال کردن این ویژگی، استفاده کنید applyComplexClasses پرچم:

module.exports = {  experimental: {    applyComplexClasses: true,  },};

پالت رنگی جدید

ما یک تیزر از پالت رنگی جدید Tailwind 2.0 اضافه کرده ایم که می توانید از امروز با استفاده از آن شروع به بازی کنید. uniformColorPalette پرچم:

module.exports = {  experimental: {    uniformColorPalette: true,  },};

ایده پشت پالت جدید این است که هر رنگ در هر سایه روشنایی درک شده مشابهی دارد. بنابراین می توانید تجارت کنید indigo-600 با blue-600 و انتظار کنتراست رنگی یکسان را داشته باشید.

ما انتظار داریم که این رنگ‌ها همچنان که روی آن‌ها تکرار می‌کنیم تغییر زیادی پیدا کنند، بنابراین با مسئولیت خود از آنها استفاده کنید.

مقیاس فاصله طولانی

ما یک مقیاس فاصله بسیار بزرگتر اضافه کرده ایم که شامل مقادیر خرد جدید مانند 0.5، 1.5، 2.5، و 3.5، و همچنین مقادیر بزرگ جدید مانند 72، 80، و 96، و مقادیر کسری مبتنی بر درصد را به کل مقیاس فاصله اضافه کنید (1/2، 5/6، 7/12و غیره)

می توانید مقیاس فاصله طولانی را با استفاده از آن فعال کنید extendedSpacingScale پرچم:

module.exports = {  experimental: {    extendedSpacingScale: true,  },};

این بسیار پایدار است، اگر آن را تغییر دهیم تعجب خواهم کرد.

ارتفاع خط استاندارد برای اندازه فونت پیش فرض

ما ارتفاع خط های پیش فرض توصیه شده را به هر اندازه فونت داخلی اضافه کرده ایم که می تواند از طریق آن فعال شود defaultLineHeights پرچم:

module.exports = {  experimental: {    defaultLineHeights: true,  },};

این یک تغییر انقلابی است و طراحی شما را تحت تأثیر قرار می دهد زیرا قبلاً تمام اندازه های فونت دارای ارتفاع خط پیش فرض بودند 1.5.

مقیاس اندازه فونت گسترده

ما سه اندازه فونت جدید اضافه کردیم (7xl، 8xl، و 9xl) با آخرین روند متون فوق قهرمان همراه باشید. آنها همچنین شامل ارتفاع ردیف پیش فرض هستند.

می توانید آنها را در زیر فعال کنید extendedFontSizeScale پرچم:

module.exports = {  experimental: {    extendedFontSizeScale: true,  },};

می خواهید در مورد این پست صحبت کنید؟ در این مورد در GitHub → بحث کنید