استفاده از لایه‌های آبشار CSS برای مدیریت سبک‌های سفارشی در یک پروژه Tailwind، فناوری اطلاعات پلاتوبلاکچین. جستجوی عمودی Ai.

استفاده از لایه‌های آبشار CSS برای مدیریت سبک‌های سفارشی در یک پروژه Tailwind

تمبر زمانی: 24 اوت 2022، 9:11 صبح

اگر یک کلاس کاربردی فقط یک کار را انجام می دهد، به احتمال زیاد نمی خواهید آن را با هیچ سبکی که از جای دیگری آمده است نادیده بگیرید. یک رویکرد استفاده است !important 100٪ مطمئن باشید که سبک بدون توجه به تضادهای ویژگی اعمال خواهد شد.

فایل پیکربندی Tailwind دارای یک !important گزینه ای که به طور خودکار اضافه می شود !important به هر کلاس ابزار. استفاده از آن اشکالی ندارد !important به این ترتیب، اما امروزه راه‌های بهتری برای رسیدگی به ویژگی‌ها وجود دارد. استفاده كردن لایه های آبشاری CSS ما می توانیم از رویکرد سنگین استفاده اجتناب کنیم !important.

لایه های آبشاری به ما این امکان را می دهند که سبک ها را به "لایه ها" گروه بندی کنیم. تقدم یک لایه همیشه ویژگی انتخابگر را شکست می دهد. ویژگی فقط در داخل هر لایه مهم است. ایجاد یک نظم لایه معقول به جلوگیری از درگیری های سبک و جنگ های خاص کمک می کند. این همان چیزی است که CSS Cascade Layers را به ابزاری عالی تبدیل می کند مدیریت سبک های سفارشی در کنار سبک های چارچوب های شخص ثالثمانند Tailwind.

منبع Tailwind .css فایل معمولا چیزی شبیه به این شروع می شود:

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

بیایید نگاهی به اسناد رسمی Tailwind در مورد بخشنامه ها:

دستورالعمل‌ها، قوانین سفارشی ویژه Tailwind هستند که می‌توانید در CSS خود استفاده کنید و عملکردهای ویژه‌ای را برای پروژه‌های Tailwind CSS ارائه می‌دهند. استفاده کنید @tailwind دستورالعمل برای درج Tailwind's base, components, utilities و variants استایل ها را در CSS خود ایجاد کنید.

در فایل CSS خروجی که ساخته می شود، بازنشانی CSS Tailwind - معروف به پیش پرواز - ابتدا به عنوان بخشی از سبک های پایه گنجانده شده است. بقیه base متشکل از متغیرهای CSS مورد نیاز برای کار Tailwind است. components مکانی است که شما می توانید کلاس های سفارشی خود را اضافه کنید. هر کلاس ابزاری که در نشانه گذاری خود استفاده کرده اید در مرحله بعدی ظاهر می شود. واریانت‌ها سبک‌هایی برای مواردی مانند حالت‌های شناور و فوکوس و استایل‌های پاسخ‌گو هستند که در فایل CSS تولید شده در آخرین حالت ظاهر می‌شوند.

باد دم @layer رهنمود

گیج کننده است، Tailwind خود را دارد @layer نحو. این مقاله در مورد استاندارد CSS است، اما اجازه دهید نگاهی گذرا به نسخه Tailwind بیندازیم (که کامپایل می‌شود و در CSS خروجی قرار نمی‌گیرد). باد دم @layer دستورالعمل راهی برای تزریق استایل های اضافی خود به قسمت مشخصی از فایل CSS خروجی است.

به عنوان مثال، برای اضافه کردن سبک های خود به base سبک ها، کارهای زیر را انجام می دهید:

@layer base {
  h1 {
    font-size: 30px;
  }
}

La components لایه به طور پیش فرض خالی است - فقط مکانی برای قرار دادن کلاس های خود است. اگر کارها را به روش Tailwind انجام می‌دادید، احتمالاً از آن استفاده می‌کردید @apply (اگرچه اخیراً خالق Tailwind در برابر آن توصیه کرد)، اما شما همچنین می توانید کلاس ها را به روش معمولی بنویسید:

@layer components {
  .btn-blue {
    background-color: blue;
    color: white;
  }
}

استاندارد CSS بسیار قدرتمندتر است. برگردیم به آن…

با استفاده از استاندارد CSS @layer

در اینجا نحوه بازنویسی آن برای استفاده از استاندارد CSS آمده است @layer:

@layer tailwind-base, my-custom-styles, tailwind-utilities;

@layer tailwind-base {
  @tailwind base;
}

@layer tailwind-utilities {
  @tailwind utilities;
  @tailwind variants;
}

برخلاف دستورالعمل Tailwind، اینها جمع‌آوری نمی‌شوند. آنها توسط مرورگر درک می شوند. در واقع، DevTools در Edge، Chrome، Safari و Firefox حتی هر لایه ای را که تعریف کرده اید به شما نشان می دهد.

استفاده از لایه‌های آبشار CSS برای مدیریت سبک‌های سفارشی در یک پروژه Tailwind

شما می توانید هر تعداد لایه که می خواهید داشته باشید - و نام آنها را هر چه می خواهید - اما در این مثال، تمام سبک های سفارشی من در یک لایه قرار دارند (my-custom-styles). خط اول ترتیب لایه ها را تعیین می کند:

@layer tailwind-base, my-custom-styles, tailwind-utilities;

این باید از قبل ارائه شود. مطمئن شوید که این خط را قبل از هر کد دیگری که استفاده می کند قرار دهید @layer. اولین لایه در لیست خواهد بود کمترین قدرتمند، و آخرین لایه در لیست خواهد بود اکثر قدرتمند یعنی tailwind-base هست کم قدرت ترین لایه و هر کدی که در آن باشد توسط تمام لایه های بعدی رد می شود. این نیز به این معنی است tailwind-utilities همیشه بر هر سبک دیگری غلبه خواهد کرد - صرف نظر از ترتیب یا ویژگی منبع. (ابزارها و انواع میتوانست در لایه‌های جداگانه بروید، اما نگه‌دارنده‌های Tailwind اطمینان حاصل می‌کنند که انواع همیشه بر برنامه‌های کاربردی برتری دارند، تا زمانی که انواع مختلف را در زیر دستورالعمل ابزارها قرار دهید.)

هر چیزی که در یک لایه نیست، هر چیزی را که در یک لایه است لغو می کند (به استثنای یک سبک، سبک هایی که استفاده می کنند !important). بنابراین، شما همچنین می توانید ترک را انتخاب کنید utilities و variants خارج از هر لایه:

@layer tailwind-base, tailwind-components, my-custom-styles;

@layer tailwind-base {
  @tailwind base;
}

@layer tailwind-components {
  @tailwind components;
}

@tailwind utilities;
@tailwind variants;

این واقعا چه چیزی برای ما خرید؟ مواقع زیادی وجود دارد که انتخابگرهای پیشرفته CSS بسیار مفید هستند. بیایید یک نسخه از :focus-within که فقط به فوکوس صفحه کلید به جای کلیک ماوس با استفاده از آن پاسخ می دهد :has انتخابگر (که در کروم 105 فرود می آید). این به عنصر والد زمانی که هر یک از فرزندانش فوکوس دریافت می کند، سبک می دهد. Tailwind 3.1 معرفی شد انواع سفارشی - به عنوان مثال <div class="[&:has(:focus-visible)]:outline-red-600"> - اما گاهی اوقات نوشتن CSS ساده تر است:

@layer tailwind-base, my-custom-styles;
@layer tailwind-base {
  @tailwind base;
}

@tailwind utilities;

@layer my-custom-styles {
  .radio-container {
    padding: 4px 24px;
    border: solid 2px rgb(230, 230, 230);
  }
  .radio-container:has(:focus-visible) {
    outline: solid 2px blue;
  }
}

بیایید بگوییم فقط در یک مورد می‌خواهیم آن را لغو کنیم outline-color از جانب blue به چیز دیگری فرض کنید عنصری که با آن کار می کنیم دارای هر دو کلاس Tailwind است .outline-red-600 و خودمان .radio-container:has(:focus-visible) کلاس:

<div class="outline-red-600 radio-container"> ... </div>

برای outline-color پیروز خواهد شد؟

به طور معمول، ویژگی بالاتر از .radio-container:has(:focus-visible) به این معنی است که کلاس Tailwind هیچ تأثیری ندارد - حتی اگر در ترتیب منبع پایین‌تر باشد. اما، بر خلاف Tailwind @layer دستورالعملی که بر سفارش منبع، استاندارد CSS متکی است @layer ویژگی را نادیده می گیرد.

در نتیجه، می‌توانیم از انتخابگرهای پیچیده در سبک‌های سفارشی خود استفاده کنیم، اما همچنان در صورت نیاز، آنها را با کلاس‌های کاربردی Tailwind لغو کنیم - بدون اینکه نیازی به استفاده از روش‌های سخت‌گیرانه داشته باشیم. !important استفاده برای رسیدن به آنچه می خواهیم

تمبر زمان:

بیشتر از ترفندهای CSS