ٹیل ونڈ سی ایس ایس میں ٹیمپلیٹ پاتھز کو کنفیگر کرنے کا طریقہ

یہ پوسٹ Tailwind CSS میں ٹیمپلیٹ کے راستوں کو ترتیب دینے کے طریقہ کار کو ظاہر کرتی ہے۔

Tailwind CSS میں ٹیمپلیٹ پاتھز کو کیسے کنفیگر کریں؟

' tailwind.config.js ” کنفیگریشن فائل کا استعمال ٹیمپلیٹ کے راستوں کو کنفیگر کرنے کے لیے کیا جاتا ہے جس میں صارف Tailwind CSS کو ایمبیڈ کرنا چاہتا ہے۔ یہ ڈیفالٹ کے طور پر موجود نہیں ہے تاہم اسے 'npm' پیکیج مینیجر کا استعمال کرتے ہوئے پروجیکٹ میں بنایا جا سکتا ہے۔

یہ سیکشن 'tailwind.config.js' فائل میں ٹیمپلیٹ کے راستوں کو ترتیب دینے کے لیے کچھ ضروری اقدامات کرتا ہے۔

نوٹ : 'Tailwind CSS' کو لاگو کرنے کے لیے، پہلے انسٹال کریں ' Node.js فراہم کردہ لنک کے ذریعے آپ کے سسٹم میں درخواست https://nodejs.org/en 'حکموں کو انجام دینے کے لئے۔

مرحلہ 1: 'TailwindCSS' انسٹال کریں
سب سے پہلے، 'Project1' کے نام سے ایک نیا پروجیکٹ بنائیں اور اسے کوڈ ایڈیٹر میں کھولیں۔ اب، نیا ٹرمینل کھولیں اور درج ذیل کمانڈ کی مدد سے 'Tailwind CSS' انسٹال کریں:

مندرجہ بالا کمانڈ میں، ' این پی ایم ' نوڈ پیکیج مینیجر ہے جو 'TailwindCSS' کو انسٹال کرتا ہے، جیسا کہ:

یہاں آؤٹ پٹ ظاہر کرتا ہے کہ 'ٹیل ونڈ CSS' اور اس کے پیکجز کامیابی کے ساتھ ڈاؤن لوڈ ہو گئے ہیں۔

مرحلہ 2: ٹیل ونڈ کنفیگریشن فائل بنائیں
اگلا، Tailwind CSS کنفیگریشن فائل بنائیں ' tailwind.config.js اس کی فعالیت کو بڑھانے کے لیے جیسے کہ اس کمانڈ کا استعمال کرتے ہوئے HTML ٹیمپلیٹ کے راستوں، صارف کی وضاحت شدہ کلاسز، اور بہت سے دوسرے کی وضاحت کرنا:

آؤٹ پٹ سے پتہ چلتا ہے کہ مخصوص کنفیگریشن فائل بنائی گئی ہے۔ اب، ایک نظر ڈالیں ' tailwind.config.js فائل:

مرحلہ 3: ٹیل ونڈ ڈائریکٹیو کو مین CSS فائل میں شامل کریں۔
اب، بنائے گئے ٹیل وِنڈ پروجیکٹ میں خصوصی فعالیت شامل کرنے کے لیے، مین میں درج ذیل تین پہلے سے موجود ٹیل وِنڈ ہدایات شامل کریں۔ style.css فائل:

مندرجہ بالا کوڈ بلاک میں:

• بنیاد : یہ 'Tailwind CSS' کی پہلی پرت ہے جو ویب صفحہ کے اسٹائل کو بطور ڈیفالٹ جیسے کہ بیک گراؤنڈ کلر، ٹیکسٹ کلر، یا فونٹ فیملی میں ترمیم کرتی ہے۔
• اجزاء : یہ دوسری تہہ 'کنٹینر' کلاس کے اندر دستیاب ہے جو براؤزر کے سائز کے مطابق چوڑائی کا اضافہ کرتی ہے۔ اس کے سیکشن میں، صارف اپنے بنائے ہوئے بیرونی اجزاء کو شامل کر سکتا ہے۔
• افادیت : یہ تیسری تہہ ہے جو تقریباً تمام اسٹائل کلاسز کو شامل کرتی ہے جیسے شیڈو، کلر، ایڈنگ، فلیکس، اور بہت سی دوسری کلاسز۔

یہ ہدایات درج ذیل ونڈو میں دیکھی جا سکتی ہیں:

مرحلہ 4: سی ایس ایس بنائیں
اب، درج ذیل کمانڈ پر عمل کرتے ہوئے Tailwind CLI ٹول کا استعمال کرتے ہوئے CSS بنائیں۔ یہ تمام ٹیمپلیٹ فائلوں کو اسکین کرے گا اور سی ایس ایس کو ' dist/output.css فائل:

یہ دیکھا جا سکتا ہے کہ مندرجہ بالا کمانڈ کو کامیابی سے عمل میں لایا گیا ہے۔ اب، 'project1' کی فائل کا ڈھانچہ اس طرح لگتا ہے:

مرحلہ 5: ایک HTML ٹیمپلیٹ بنائیں اور اس کا راستہ ترتیب دیں۔
HTML ٹیمپلیٹ بنائیں جس میں صارف 'ٹیل ونڈ سی ایس ایس' کو سرایت کرنا چاہتا ہے اور پھر اس کے راستے کو 'میں کنفیگر کرنا چاہتا ہے۔ tailwind.config.js ' آئیے پہلے درج ذیل ایچ ٹی ایم ایل ٹیمپلیٹ پر ایک نظر ڈالتے ہیں ' index.html ”:

مندرجہ بالا کوڈ لائنوں میں:

• 'سر' سیکشن استعمال کرتا ہے ' 'تخلیق شدہ/مرتب شدہ CSS فائل کو لنک کرنے کے لیے ٹیگ' /dist/output.css 'موجودہ HTML فائل کے ساتھ' index.html '
• 'باڈی' سیکشن پہلے اس کی وضاحت کرتا ہے '

  'ٹیگ جو Tailwind کلاس کا استعمال کرتے ہوئے پہلی ذیلی سرخی کی وضاحت کرتا ہے' متن سیدھ کریں۔ اس کی سیدھ کو 'مرکز' میں ایڈجسٹ کرنے کے لیے، ' فونٹ کا وزن متن کو 'بولڈ' کرنے کے لیے، ' متن کا رنگ 'مخصوص رنگ شامل کرنے کے لیے، اور' پس منظر کا رنگ بالترتیب دیے گئے پس منظر کا رنگ لگانے کے لیے۔

• اگلا، '

  ' اور '

  ٹیگز اپنے مواد کو اسٹائل کرنے کے لیے اوپر زیر بحث Tailwind کلاسز کا بھی استعمال کرتے ہیں۔

HTML ٹیمپلیٹ پاتھ کو ترتیب دیں۔
اگلا، کھولیں ' tailwind.config.js اور HTML ٹیمپلیٹ فائل کے 'مواد' سیکشن میں لنکس یا پاتھ شامل کریں یعنی 'index.html':

دبائیں' Ctrl+S 'نئی تبدیلیوں کو بچانے کے لیے۔

مرحلہ 6: HTML کوڈ پر عمل کریں۔
آخر میں، لائیو سرور میں HTML 'index.html' کوڈ پر عمل کریں اور اس کا آؤٹ پٹ دیکھیں:

آؤٹ پٹ

جیسا کہ دیکھا گیا، آؤٹ پٹ Tailwind CSS کی مدد سے اسٹائل شدہ HTML مواد کو دکھاتا ہے۔

نتیجہ

Tailwind CSS استعمال کرتا ہے ' tailwind.config.js ” تشکیل شدہ HTML ٹیمپلیٹ راستوں کو ترتیب دینے کے لیے کنفیگریشن فائل۔ یہ بتاتا ہے ' مواد ” سیکشن جس میں تمام HTML ٹیمپلیٹس کا صحیح راستہ، ٹیل ونڈ کلاس کے ناموں پر مشتمل سورس فائلز، اور JavaScript کے اجزاء شامل ہیں۔ یہ مخصوص HTML فائل کو اسکین کرتا ہے اور پھر اس کے مواد میں Tailwind CSS کو لاگو کرتا ہے۔ اس پوسٹ نے Tailwind CSS میں ٹیمپلیٹ کے راستوں کو کنفیگر کرنے کے مکمل طریقہ کار کی وضاحت کی ہے۔