Tailwind CSS v1.6.0 – Tailwind CSS

admin11 ساعت پیش

0 1 خواندن این مطلب 2 دقیقه زمان میبرد

این مانند Tailwind CSS نسخه 1.5 است، فقط اکنون با پشتیبانی از انیمیشن، ابزارهای اسکرول و موارد دیگر!

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

پشتیبانی از انیمیشن

Tailwind CSS v1.6 یک محصول کاملاً جدید اضافه می کند animation پلاگین اصلی با 4 انیمیشن با هدف عمومی که خارج از جعبه موجود است:

animate-spin
animate-ping
animate-pulse
animate-bounce

button type="button" class="bg-indigo-600 ..." disabled>  svg class="mr-3 h-5 w-5 animate-spin ..." viewBox="0 0 24 24">      svg>  Processingbutton>

آنها مانند همیشه با کمک قابل تنظیم هستند animation و keyframes بخش های شما tailwind.config.js موضوع:

module.exports = {  theme: {    extend: {      animation: {        wiggle: "wiggle 1s ease-in-out infinite",      },      keyframes: {        wiggle: {          "0%, 100%": { transform: "rotate(-3deg)" },          "50%": { transform: "rotate(3deg)" },        },      },    },  },};

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

جدید `prefers-reduced-motion` انواع

برای همراهی با ویژگی‌های جدید انیمیشن، ویژگی‌های جدیدی را نیز اضافه کرده‌ایم motion-safe و motion-reduce انواعی که به شما امکان می دهد CSS را به صورت مشروط بر اساس اعمال کنید prefers-reduced-motion عملکرد رسانه ای

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

div class="transition duration-150 ease-in-out motion-reduce:transition-none ... ...">div>

… یا صریحاً در ترافیک شرکت کنید تا مطمئن شوید که فقط به کاربرانی نشان داده می شود که انصراف نداده اند:

div class="duration-150 ease-in-out motion-safe:transition ... ...">div>

آنها همچنین می توانند با انواع پاسخگو و شبه کلاس ترکیب شوند:

div class="sm:motion-reduce:translate-y-0">div>div class="motion-reduce:hover:translate-y-0">div>div class="sm:motion-reduce:hover:translate-y-0">div>

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

module.exports = {  // ...  variants: {    translate: ["responsive", "hover", "focus", "motion-safe", "motion-reduce"],  },};

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

جدید `overscroll-behavior` آب و برق

ما همچنین ابزارهای جدید جدیدی را برای آن اضافه کرده ایم overscroll-behavior دارایی

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

div class="overscroll-y-contain ...">  button>

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

این افزونه را می توان در خود پیکربندی کرد tailwind.config.js فایل به عنوان overscrollBehavior:

module.exports = {  // ...  // Disabling the plugin  corePlugins: {    overscrollBehavior: false,  },  // Customizing the enabled variants  variants: {    overscrollBehavior: ["responsive", "hover"],  },};

CSS خود را بدون فایل ورودی ایجاد کنید

اگر هرگز CSS سفارشی نمی نویسید و از ایجاد این فایل همیشه خسته شده اید…

@tailwind base;@tailwind components;@tailwind utilities;

…پس من برایت عزیزم خبری دارم – اگر از ما استفاده کنی tailwindcss ابزار CLI می‌توانید به جای هدر دادن آن‌ها در یک فایل CSS بی‌معنی، شروع به واریز آن 58 کاراکتر به حساب پس‌انداز خود کنید.

آرگومان فایل ورودی دیگر در ابزار CLI مورد نیاز نیست، بنابراین اگر واقعاً لازم نیست نیاز دارند فایل CSS سفارشی، شما به سادگی می توانید این را بنویسید: