استخدام CSS Cascade Layers لإدارة الأنماط المخصصة في مشروع Tailwind

إذا كانت فئة الأدوات تعمل شيئًا واحدًا فقط ، فمن المحتمل أنك لا تريد أن يتم تجاوزها بواسطة أي أنماط قادمة من مكان آخر. نهج واحد لاستخدام !important أن تكون متأكدًا بنسبة 100٪ من أنه سيتم تطبيق النمط ، بغض النظر عن تعارضات الخصوصية.

يحتوي ملف تهيئة Tailwind على ملف !important الخيار الذي سيضيف تلقائيًا !important لكل فئة من فئات المرافق. لا حرج في استخدام !important بهذه الطريقة ، ولكن في الوقت الحاضر هناك طرق أفضل للتعامل مع الخصوصية. استخدام طبقات CSS Cascade يمكننا تجنب نهج الاستخدام الثقيل !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 الناتج الذي تم إنشاؤه ، تمت إعادة تعيين Tailwind's CSS - المعروفة باسم الاختبار المبدئي - يتم تضمينه أولاً كجزء من الأنماط الأساسية. بقية base يتكون من متغيرات CSS اللازمة لكي تعمل أداة Tailwind. components هو مكان يمكنك من خلاله إضافة فئاتك المخصصة. ستظهر بعد ذلك أي فئات أدوات استخدمتها في الترميز الخاص بك. المتغيرات هي أنماط لأشياء مثل حالات التمرير والتركيز والأنماط سريعة الاستجابة ، والتي ستظهر أخيرًا في ملف CSS الذي تم إنشاؤه.

الريح الخلفية @layer توجيهات

المربك ، Tailwind لها خاصيتها @layer بناء الجملة. تتناول هذه المقالة معيار CSS ، ولكن دعنا نلقي نظرة سريعة على إصدار Tailwind (الذي يتم تجميعه بعيدًا ولا ينتهي به الأمر في CSS الناتج). الريح الخلفية @layer التوجيه هو طريقة لإدخال الأنماط الإضافية الخاصة بك في جزء محدد من ملف CSS الناتج.

على سبيل المثال ، لإلحاق الأنماط الخاصة بك بملف base الأنماط ، يمكنك القيام بما يلي:

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

• 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 أي طبقات قمت بتحديدها.

يمكن أن يكون لديك العديد من الطبقات كما تريد - وقم بتسميتها كما تريد - ولكن في هذا المثال ، تكون جميع الأنماط المخصصة الخاصة بي في طبقة واحدة (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 محدد (الذي يهبط في Chrome 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 استخدام للحصول على ما نريد.