ٹیل ونڈ پروجیکٹ میں حسب ضرورت اسٹائلز کا نظم کرنے کے لیے CSS کیسکیڈ پرتوں کا استعمال

اگر یوٹیلیٹی کلاس صرف ایک کام کرتی ہے تو، امکانات یہ ہیں کہ آپ اسے کہیں اور سے آنے والے کسی بھی انداز سے اوور رائڈ نہیں کرنا چاہتے۔ ایک طریقہ استعمال کرنا ہے۔ !important 100% یقینی ہونے کے لیے مخصوصیت کے تنازعات سے قطع نظر، طرز کا اطلاق کیا جائے گا۔

Tailwind config فائل میں ایک ہے۔ !important آپشن جو خود بخود شامل ہوجائے گا۔ !important ہر یوٹیلیٹی کلاس کے لیے۔ استعمال کرنے میں کوئی حرج نہیں ہے۔ !important اس طرح، لیکن آج کل مخصوصیت کو سنبھالنے کے بہتر طریقے ہیں۔ استعمال کرنا سی ایس ایس کیسکیڈ پرتیں۔ ہم استعمال کرنے کے بھاری ہاتھ کے نقطہ نظر سے بچ سکتے ہیں !important.

جھرن کی پرتیں ہمیں شیلیوں کو "پرتوں" میں گروپ کرنے کی اجازت دیتی ہیں۔ ایک پرت کی ترجیح ہمیشہ سلیکٹر کی مخصوصیت کو مات دیتی ہے۔ مخصوصیت صرف ہر پرت کے اندر اہمیت رکھتی ہے۔ ایک سمجھدار پرت آرڈر قائم کرنے سے اسٹائل کے تنازعات اور مخصوص جنگوں سے بچنے میں مدد ملتی ہے۔ یہی چیز سی ایس ایس کیسکیڈ لیئرز کو ایک بہترین ٹول بناتی ہے۔ فریق ثالث کے فریم ورک کے اسٹائل کے ساتھ اپنی مرضی کے اسٹائلز کا نظم کرناٹیل ونڈ کی طرح۔

ٹیل ونڈ کا ذریعہ .css فائل عام طور پر کچھ اس طرح شروع ہوتی ہے:

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

آئیے ایک نظر ڈالیں سرکاری Tailwind دستاویزات ہدایات کے بارے میں:

ہدایات ٹیل ونڈ کے مخصوص اصول ہیں جو آپ اپنے CSS میں استعمال کر سکتے ہیں جو Tailwind CSS پروجیکٹس کے لیے خصوصی فعالیت پیش کرتے ہیں۔ کا استعمال کرتے ہیں @tailwind ٹیل ونڈ کو داخل کرنے کی ہدایت base, components, utilities اور variants آپ کے سی ایس ایس میں اسٹائل۔

آؤٹ پٹ CSS فائل میں جو بنتی ہے، Tailwind کی CSS ری سیٹ — کے نام سے جانا جاتا ہے۔ پری لائٹ - بنیادی طرز کے حصے کے طور پر پہلے شامل کیا گیا ہے۔ کے باقی base ٹیل ونڈ کے کام کرنے کے لیے درکار CSS متغیرات پر مشتمل ہے۔ components آپ کے لیے اپنی مرضی کی کلاسیں شامل کرنے کی جگہ ہے۔ کوئی بھی یوٹیلیٹی کلاسز جو آپ نے اپنے مارک اپ میں استعمال کی ہیں وہ اگلی ظاہر ہوں گی۔ ویریئنٹس ہوور اور فوکس اسٹیٹس اور ریسپانسیو اسٹائل جیسی چیزوں کے لیے اسٹائل ہیں، جو تیار کردہ CSS فائل میں سب سے آخر میں ظاہر ہوں گے۔

ٹیل ونڈ @layer ہدایت

مبہم طور پر، ٹیل ونڈ کا اپنا ہے۔ @layer نحو یہ مضمون سی ایس ایس کے معیار کے بارے میں ہے، لیکن آئیے ٹیل ونڈ ورژن پر ایک سرسری نظر ڈالتے ہیں (جو مرتب ہو جاتا ہے اور آؤٹ پٹ سی ایس ایس میں نہیں آتا)۔ ٹیل ونڈ @layer ڈائرکٹیو آؤٹ پٹ سی ایس ایس فائل کے مخصوص حصے میں آپ کی اپنی اضافی شیلیوں کو انجیکشن کرنے کا ایک طریقہ ہے۔

مثال کے طور پر، میں اپنی اپنی طرزیں شامل کرنا base طرزیں، آپ مندرجہ ذیل کام کریں گے:

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

۔ components تہہ بطور ڈیفالٹ خالی ہے — یہ صرف اپنی کلاسیں لگانے کی جگہ ہے۔ اگر آپ Tailwind کے طریقے سے کام کر رہے تھے، تو آپ شاید استعمال کریں گے۔ @apply (حالانکہ حال ہی میں Tailwind کے خالق اس کے خلاف مشورہ دیا)، لیکن آپ کلاسز کو باقاعدہ طریقے سے بھی لکھ سکتے ہیں:

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

سی ایس ایس کا معیار بہت زیادہ طاقتور ہے۔ آئیے اس پر واپس آتے ہیں…

CSS معیار کا استعمال کرتے ہوئے @layer

سی ایس ایس کے معیار کو استعمال کرنے کے لیے ہم اسے دوبارہ کیسے لکھ سکتے ہیں۔ @layer:

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

@layer tailwind-base {
  @tailwind base;
}

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

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 میں اترتا ہے۔)۔ جب اس کے بچوں میں سے کسی کو توجہ ملے گی تو یہ والدین کے عنصر کو اسٹائل کرے گا۔ ٹیل ونڈ 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 کسی اور چیز کو. ہم کہتے ہیں کہ جس عنصر کے ساتھ ہم کام کر رہے ہیں اس میں ٹیل ونڈ کلاس دونوں ہیں۔ .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 ہدایت جو سورس آرڈر پر انحصار کرتی ہے، سی ایس ایس معیار @layer خاصیت کو ختم کرتا ہے۔

نتیجے کے طور پر، ہم پیچیدہ سلیکٹرز کو اپنی مرضی کے مطابق انداز میں استعمال کر سکتے ہیں لیکن پھر بھی ضرورت پڑنے پر ٹیل وِنڈ کی یوٹیلیٹی کلاسز کے ساتھ ان کو اوور رائیڈ کر سکتے ہیں — بغیر کسی بھاری ہاتھ کا سہارا لیے۔ !important جو ہم چاہتے ہیں اسے حاصل کرنے کے لیے استعمال کریں۔