Brian
Brian

DivMagic باني

جولاءِ 8، 2023

Tailwind CSS - جديد ويب سائيٽون تيزيءَ سان ٺاھيو بغير پنھنجي HTML کي ڇڏي

Image 0

جيڪڏھن توھان چاھيو ٿا جديد، جوابي، ۽ بصري طور اپيل ڪندڙ ويب سائيٽون، Tailwind CSS توھان جو فريم ورڪ آھي. اهو روايتي CSS تصنيف جي عمل کي انقلاب ڏئي ٿو، توهان کي اجازت ڏئي ٿو ته توهان جي HTML ۾ سڌو سنئون انٽرفيس ٺاهي. Tailwind CSS 5 ملين کان وڌيڪ هفتيوار تنصيب سان گڏ سڀ کان مشهور CSS فريم ورڪ مان هڪ آهي.

آساني سان پيچيده ڊيزائن ٺاهيو

Image 1

Tailwind CSS سان، پيچيده ڊيزائن ٺاهڻ هڪ هوا بڻجي ويندو آهي. يوٽيلٽي ڪلاسز ۽ جوابي ڊيزائن جي يوٽيلٽيز جو ميلاپ توهان کي آسانيءَ سان پيچيده ترتيب ٺاهڻ جي اجازت ڏئي ٿو، توهان جي ويب سائيٽ جي ڪارڪردگي ۽ برقرار رکڻ تي سمجهوتو ڪرڻ کان سواءِ.

ڪا به شيءِ ٺاهيو

Image 2

Tailwind CSS جي خوبصورتي ان جي استحڪام ۾ آهي. توھان ڪجھھ ٺاھي سگھو ٿا ھڪڙي سادي بلاگ پيج کان ھڪڙي ترقي يافته اي ڪامرس پليٽ فارم تي، سڀ ڪجھ ساڳيا غير معمولي يوٽيلٽي ڪلاس استعمال ڪندي.

توهان صرف پنهنجي تخيل تائين محدود آهيو. وينلا سي ايس ايس استعمال ڪرڻ کان بنيادي فرق اها رفتار آهي جنهن ۾ توهان ڪسٽم ڊيزائن ٺاهي سگهو ٿا.

html حصن جهڙوڪ div, div class, p class سان ڪسٽم css ڪلاس استعمال ڪرڻ جو روايتي طريقو هميشه هڪ آپشن آهي پر رفتار جي بهتري جيڪا Tailwind CSS سان اچي ٿي توهان جي زندگي کي آسان بڻائي ٿي.

بهترين عمل اصل ۾ ڪم نه ڪندا آھن

Image 3

روايتي طور تي، سي ايس ايس کي عالمي اندازن جو هڪ سيٽ قائم ڪرڻ ۽ جزو جي بنياد تي جزو جي بنياد تي ان کي بهتر ڪندي لکيو ويو آهي. جڏهن ته هي هڪ مشهور طريقو آهي، اهو ٿي سگهي ٿو وڏو، سخت-کي- برقرار رکڻ وارو ڪوڊ.

Tailwind CSS هن تصور کي چيلينج ڪري ٿو، اهو دليل ڏيندي ته يوٽيليٽي-پهرين CSS هڪ صاف، وڌيڪ برقرار رکڻ وارو حل پيش ڪري ٿو.

Tailwind CSS لاءِ سڀ کان وڌيڪ مشهور جزو لائبريري

Image 4

daisyUI Tailwind CSS لاءِ سڀ کان وڌيڪ مشهور جزو لائبريري آهي، جيڪا 50 کان وڌيڪ اڳ ۾ ٺهيل اجزاء، 500+ يوٽيلٽي ڪلاسز، ۽ عملي طور تي لاتعداد امڪانن تي فخر ڪري ٿي. اهو توهان کي هر دفعي جڏهن توهان هڪ نئون پروجيڪٽ ٺاهي رهيا آهيو ته ڦيٿي کي ٻيهر ٺاهڻ کان بچائي ٿو.

هر ڀيري ويل کي ٻيهر ايجاد نه ڪريو

Image 5

هر نئين پروجيڪٽ لاءِ درجنين درجي جا نالا لکڻ جي ڏکوئيندڙ عمل سان پنهنجو وقت ضايع ڪرڻ بدران، Tailwind CSS توهان کي يوٽيلٽي ڪلاسن جو هڪ چڱي طرح بيان ڪيل، سيمينٽڪ سيٽ استعمال ڪرڻ جي قابل بڻائي ٿو.

اهي ڪلاس ٻيهر قابل استعمال آهن ۽ CSS cascade سان هم آهنگي سان ڪم ڪن ٿا، توهان کي توهان جي سڀني منصوبن لاءِ مضبوط بنياد فراهم ڪن ٿا.

Tailwind CSS - A Utility First CSS فريم ورڪ

Image 6

ان جي بنيادي طور تي، Tailwind CSS هڪ يوٽيلٽي-پهرين CSS فريم ورڪ آهي. ان جو مطلب اهو آهي ته اهو گهٽ-سطح، ڪمپوزبل يوٽيلٽي ڪلاس مهيا ڪري ٿو جيڪو توهان استعمال ڪري سگهو ٿا ڪنهن به ڊزائن کي ٺاهڻ لاءِ، سڌو پنهنجي HTML ۾. وڌيڪ نه ختم ٿيندڙ CSS فائلون، صرف سادو ۽ وجداني ڪوڊ.

سيمينٽڪ ڪلاس جا نالا استعمال ڪريو

Image 7

سيمينٽڪ ڪلاس جا نالا توهان جي ڪوڊ جي پڙهڻ جي صلاحيت کي بهتر بڻائيندا آهن، اهو سمجهڻ آسان بڻائي ٿو ته هڪ مخصوص طبقو ڇا ڪندو آهي صرف ان جو نالو ڏسي. هي ڪيترن ئي خاصيتن مان هڪ آهي جنهن کي Tailwind CSS اختيار ڪيو آهي ڊولپر جي تجربي کي بهتر ڪرڻ لاءِ.

خالص CSS. فريم ورڪ Agnostic. هر هنڌ ڪم ڪري ٿو

Image 8

Tailwind CSS توهان کي ڪنهن خاص فريم ورڪ سان پابند نٿو ڪري. اهو صرف خالص CSS آهي، تنهنڪري توهان ان کي ڪنهن به فريم ورڪ سان استعمال ڪري سگهو ٿا، يا ڪنهن به فريم ورڪ سان به. اهو هر هنڌ ڪم ڪري ٿو جيڪو CSS ڪم ڪري ٿو.

Tailwind CSS جا فائدا

Image 9

Tailwind CSS استعمال ڪرڻ جا فائدا شامل آھن پيداوار وڌائڻ، گھٽايل CSS فائل سائيز، ۽ ترقي يافته ڊولپر جو تجربو يوٽيليٽي-پهرين طريقي جي ڪري. اضافي طور تي، Just-In-Time (JIT) موڊ مهيا ڪري ٿو روشنيءَ جي تيز تعمير وقت، توهان جي ترقي جي عمل کي وڌيڪ تيز ڪندي.

Tailwind CSS قيمت

Image 10

Tailwind CSS هڪ اوپن سورس پروجيڪٽ آهي، جنهن جو مطلب آهي ته اهو استعمال ڪرڻ لاءِ مڪمل طور تي مفت آهي. قيمت اچي ٿي جڏهن توهان پريميئم خاصيتن تائين رسائي حاصل ڪرڻ چاهيو ٿا جهڙوڪ UI اجزاء ۽ ٽيمپليٽس، جيڪي Tailwind UI ذريعي پيش ڪيا ويا آهن.

اهو هڪ ئي وقت ۾ خيال ۽ لچڪدار آهي

Image 11

Tailwind CSS هڪ مضبوط راءِ ڏئي ٿو ته توهان جي CSS کي ڪيئن ٺاهيو وڃي، اڃان تائين اهو ڪافي لچڪدار آهي حسب ضرورت جي اجازت ڏيڻ لاءِ. هي بيلنس توهان کي ڌيان ڏيڻ جي قابل بڻائي ٿو جيڪو سڀ کان وڌيڪ اهم آهي - خوبصورت UIs ٺاهڻ.

جديد خاصيتون

Image 12

Tailwind CSS جديد فيچرز جهڙوڪ Flexbox، Grid، ۽ ڪسٽم پراپرٽيز کي گڏي ٿو، ان کي جديد ويب ايپليڪيشنون ٺاهڻ لاءِ هڪ بهترين انتخاب بڻائي ٿو.

Tailwind CSS استعمال ڪرڻ لاءِ شرطون

Image 13

ان کان اڳ جو توھان استعمال ڪرڻ شروع ڪريو Tailwind CSS، توھان کي HTML ۽ CSS جي بنيادي سمجھ جي ضرورت آھي.

Tailwind CSS ڪڏهن استعمال ڪجي

Image 14

Tailwind CSS سڀني قسمن جي ويب پروجيڪٽس لاءِ موزون آهي، وڏي يا ننڍي. جيڪڏهن توهان CSS سان وڙهڻ کان ٿڪجي پيا آهيو ۽ وڌيڪ ڪارائتو، ڊولپر-دوست حل ڳولي رهيا آهيو، ته پوءِ Tailwind CSS توهان لاءِ آهي.

اجزاء جي فريم ورڪ ۾ نه؟

Image 15

جيڪڏهن توهان فين نه آهيو جزوي فريم ورڪ جهڙوڪ React يا Vue، ڪا به پريشاني ناهي. Tailwind CSS فريم ورڪ-اجناسٽڪ آهي ۽ خالص HTML ۽ JavaScript سان استعمال ٿي سگهي ٿو.

Tailwind CSS ۽ ٻين CSS فريم ورڪ جي وچ ۾ هڪجهڙائي ۽ فرق

Image 16

جڏهن ته ٻيا فريم ورڪ جهڙوڪ بوٽ اسٽريپ ۽ فائونڊيشن اڳ ۾ ٺهيل اجزاء پيش ڪن ٿا، Tailwind CSS توهان کي توهان جي HTML ڇڏڻ کان سواء مڪمل طور تي ڪسٽم ڊيزائن ٺاهڻ لاء اوزار ڏئي ٿو. بهرحال، جزوي لائبريرين جهڙوڪ daisyUI جي انضمام سان، توهان هاڻي لطف اندوز ڪري سگهو ٿا ٻنهي دنيان جي بهترين.

ڊارڪ موڊ

Image 17

Tailwind CSS ۽ daisyUI جي جديد خصوصيتن مان هڪ آهي ڊارڪ موڊ، جيڪو توهان کي اجازت ڏئي ٿو ڳري موضوعن تي ٻڌل ويب سائيٽون بنا ڪنهن آسانيءَ سان.

Flexbox مثال

Image 18

Tailwind CSS جديد CSS خاصيتن جهڙوڪ Flexbox سان چڱي طرح ضم ٿي. مثال طور، توهان ڪلاس استعمال ڪندي هڪ جوابي ترتيب ٺاهي سگهو ٿا جهڙوڪ flex، justify-center، items-center، وغيره.

Just-in-Time جي ميلاپ سان، توهان آساني سان مختلف يوٽيلٽي ڪلاس جون قيمتون آزمائي سگهو ٿا. جيڪڏهن هڪ يوٽيلٽي ڪلاس ڪم نه ڪيو، بس ان کي تبديل ڪريو پنهنجي عنصر کي ترتيب ڏيڻ لاءِ.

هڪ Flexbox ترتيب جو مثال

Image 19

Tailwind CSS استعمال ڪندي، اهو آسان آهي پيچيده ترتيب ٺاهڻ جهڙوڪ هڪ جوابي نيويگيشن بار. هتي هڪ مثال آهي:

<nav class="flex items-center justify-between flex-wrap bg-teal-500 p-6">
  <div class="flex items-center flex-shrink-0 text-white mr-6">
    <span class="font-semibold text-xl tracking-tight">Tailwind CSS</span>
  </div>
  <div class="block lg:hidden">
    <button class="flex items-center px-3 py-2 border rounded text-teal-200 border-teal-400 hover:text-white hover:border-white">
      <svg class="fill-current h-3 w-3" viewBox="0 0 20 20"><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v15z"></path></svg>
    </button>
  </div>
  <div class="w-full block flex-grow lg:flex lg:items-center lg:w-auto">
    <div class="text-sm lg:flex-grow">
      <a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4">Home</a>
      <a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4">About</a>
      <a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white">Contact</a>
    </div>
  </div>
</nav>

تيار ٿيل اجزاء

Image 20

جيڪڏهن توهان پنهنجي پروجيڪٽ ۾ tailwind css ڪوڊ استعمال ڪرڻ جو فيصلو ڪيو ٿا، ته توهان آن لائن ڪيترائي اڳ ۾ ٺهيل حصا ڳولي سگهندا. توھان انھن مان ڪنھن کي نقل ڪري سگھو ٿا ۽ پنھنجي ويب سائيٽ لاءِ ڪسٽمائيز ڪري سگھو ٿا.

CSS کي Tailwind CSS ۾ ڪيئن بدلجي

Image 21

CSS کي Tailwind CSS ڪلاسز ۾ تبديل ڪرڻ جي قابل ٿيڻ هڪ شيءِ آهي جيڪا اڪثر ڊولپرز جي ضرورت آهي. انٽرنيٽ تي ڪيتريون ئي ويب سائيٽون آهن جيڪي Tailwind CSS جي وجود کان اڳ ٺهيل آهن. اهي ويب صفحا استعمال ڪن ٿا css سان اسٽائل شيٽ ۽ ويب ڊولپمينٽ پروفيشنل انهن صفحن کي Tailwind CSS ڏانهن منتقل ڪرڻ چاهيندا آهن.

DivMagic هڪ ويب ڊولپمينٽ جو اوزار آهي جيڪو ويب ڊولپر ۽ سافٽ ويئر ڊولپرز لاءِ ٺهيل آهي. اهو ڪنهن به انداز کي وينلا سي ايس ايس کان Tailwind CSS تائين نقل ڪرڻ جي اجازت ڏئي ٿو. هڪ ڪلڪ سان، توهان انٽرنيٽ تي ڪنهن به جزو کي Tailwind CSS ۾ تبديل ڪري سگهو ٿا ۽ Tailwind کي پنهنجي پروجيڪٽ ۾ استعمال ڪري سگهو ٿا ۽ انداز کي ڪسٽمائيز ڪري سگهو ٿا جيئن توهان چاهيو.

Tailwind CSS فلسفو ۾ گہرے کوسو

Image 22

Tailwind CSS جي پويان فلسفو افاديت تي ڌيان ڏيڻ آهي. ان جو مطلب آهي اڳواٽ وضاحتي جزو ڪلاسن جي بدران، Tailwind CSS گهٽ-سطح جي يوٽيلٽي ڪلاس مهيا ڪري ٿي جيڪي توهان کي پنهنجي HTML ڇڏڻ کان سواءِ منفرد ڊيزائن ٺاهڻ جي اجازت ڏين ٿيون.

روايتي CSS کان پري ڇو وڃو؟

Image 23

روايتي CSS شايد اوور رائيڊز، ڦاٽل فائلن، ۽ 'ڊيو سوپ' جي گھڻي استعمال جو سبب بڻجي سگھي ٿي. يوٽيليٽي-پهرين CSS فريم ورڪ ڏانهن منتقل ڪرڻ سان Tailwind CSS، توهان انهن مسئلن کي گهٽائي سگهو ٿا، جنهن جي نتيجي ۾ هڪ صاف، وڌيڪ منظم ڪوڊ بيس.

يوٽيلٽي ڪلاس جي طاقت جو تجربو ڪريو

Image 24

يوٽيلٽي ڪلاسز توهان کي توهان جي اسٽائل شيٽ ۾ ساڳئي انداز کي ورجائڻ کان بچڻ ۾ مدد ڪن ٿيون. اهو هڪ اصول آهي "پاڻ کي نه ورجايو" (DRY). اهي ڪلاس توهان کي اهم وقت ۽ ڪوشش بچائيندا آهن ۽ هڪ انتهائي برقرار رکڻ واري ڪوڊ بيس ڏانهن وٺي ويندا آهن.

Tailwind CSS جي هدايتن جي ڳولا

Image 25

Tailwind CSS ڪجھ ھدايتون متعارف ڪرايون آھن جيڪي توھان جي اسٽائل شيٽ ۾ استعمال ڪري سگھجن ٿيون. انهن ۾ شامل آهن @apply، @variants، ۽ @screen. انهن هدايتن کي سمجهڻ ۽ استعمال ڪرڻ توهان جي Tailwind CSS تجربو کي تمام گهڻو وڌائي سگھي ٿو. اهي Tailwind Config CSS فائل ۾ رکي سگهجن ٿيون. توهان هن طريقي سان استعمال ڪندي سي ايس ايس ڪلاس لکي سگهو ٿا.

وڌايو Tailwind CSS پلگ ان سان

Image 26

Tailwind CSS پلگ ان سان وڌائي سگھجي ٿو، نئين ڪارڪردگي شامل ڪرڻ يا موجوده ھڪڙي کي ترتيب ڏيڻ. توهان جي ويب منصوبن جي ڪارڪردگي ۽ جمالياتي کي وڌائڻ لاء پلگ ان کي ڪيئن استعمال ڪرڻ سکو.

شامل ڪريو Tailwind CSS پنھنجي ڪم جي فلو ۾

Image 27

Tailwind CSS کي توهان جي ڊولپمينٽ ورڪ فلو ۾ ضم ڪرڻ بلڪل سادو آهي، ڇا توهان استعمال ڪري رهيا آهيو بلڊ ٽولز جهڙوڪ Webpack يا Parcel، يا ڪم ڪري رهيا آهيو فريم ورڪ جهڙوڪ Next.js يا Gatsby.

Tailwind CSS سان رسائي کي وڌايو

Image 28

Tailwind CSS پنهنجي ڪلاسن ۾ ARIA خاصيتن جي هڪ حد کي شامل ڪندي پهچ واري ڊيزائن جي حوصلا افزائي ڪري ٿي. وڌيڪ قابل رسائي انٽرفيس ٺاهيو ۽ هر ڪنهن لاءِ استعمال ڪندڙ تجربو وڌايو.

Tailwind CSS سان Flexbox ۽ گرڊ جي طاقت کي استعمال ڪريو

جديد CSS لي آئوٽ ماڊلز کي استعمال ڪريو جيئن Flexbox ۽ گرڊ Tailwind CSS سان. سکو ته ڪيئن يوٽيلٽي ڪلاس استعمال ڪري سگھجن ٿا ترتيب کي ڪنٽرول ڪرڻ لاءِ لچڪدار ۽ جوابي انداز ۾.

توهان جي Tailwind CSS پروجيڪٽس کي ڪيئن ڊيبگ ڪجي

Tailwind CSS ڪيترائي ڊيبگنگ ٽولز ۽ ٽيڪنڪ مهيا ڪري ٿي جيڪي اسٽائلنگ جي مسئلن کي سڃاڻڻ ۽ حل ڪرڻ آسان بڻائين ٿيون. انھن اوزارن کي سمجھو ۽ پنھنجي ڊيبگنگ صلاحيتن کي وڌايو.

Tailwind CSS سان هڪ رنگين ويب ٺاهيو

Tailwind CSS حسب ضرورت رنگن جي وسيع پيليٽ سان گڏ اچي ٿو. سکو ته ڪيئن استعمال ڪجي ۽ انهن رنگن کي ترتيب ڏيڻ لاءِ متحرڪ ۽ بصري طور تي دلڪش ڊيزائن ٺاهڻ لاءِ.

Tailwind CSS جي JIT موڊ سان تيزيءَ سان ترقي ڪريو

Tailwind CSS جي Just-In-Time موڊ ۾ وڌيڪ گہرا ڄاڻو. سمجھو ته اهو ڪيئن ڪم ڪري ٿو ۽ اهو ڪيئن ڪري سگھي ٿو خاص طور تي توهان جي ترقي ۽ تعمير جي وقت کي تيز ڪري.

زيرو کان هيرو تائين: ماسٽر ٽيل ونڊ سي ايس ايس

Tailwind CSS ۾ مهارت حاصل ڪرڻ لاءِ سفر شروع ڪريو. توهان جي ماحول کي ترتيب ڏيڻ کان وٺي جديد عنوانن کي ڳولڻ تائين، هي جامع گائيڊ توهان کي ڍڪي ڇڏيو آهي.

Tailwind CSS کي پنهنجي ضرورت مطابق ترتيب ڏيو

Tailwind CSS جي سڀ کان وڏي طاقت ان جي لچڪ آهي. سکو ته Tailwind کي پنهنجي پروجيڪٽ جي مخصوص ضرورتن مطابق ڪيئن ترتيب ڏيو.

Tailwind CSS سان هٿ ملائڻ

عملي مثالن جي هڪ سلسلي ذريعي هٿرادو سکيا ۾ مشغول ٿيو. معلوم ڪريو ته Tailwind CSS ۽ DaisyUI استعمال ڪندي مختلف ويب اجزاء ڪيئن ٺاھيو.

ٻين CSS فريم ورڪ کان Tailwind CSS ڏانهن لڏپلاڻ

Tailwind CSS کي تبديل ڪرڻ تي غور ڪيو پيو وڃي؟ سمجھو Tailwind ۽ ٻين فريم ورڪ جي وچ ۾ اهم فرق، ۽ سکيو موثر حڪمت عمليون لڏپلاڻ لاءِ توهان جي منصوبن.

توھان استعمال ڪري سگھوٿا DivMagic يا ساڳيا اوزار توھان جي لڏپلاڻ جي رفتار کي خاص طور تي وڌائڻ لاءِ.

ويب ڊولپمينٽ جا اوزار جهڙوڪ DivMagic توهان کي ڪنهن به عنصر کي نقل ڪرڻ جي اجازت ڏين ٿا ڪنهن به ڊزائن ۽ ڪنهن به انداز کي ڪنهن به ويب سائيٽ تان هڪ ڪلڪ سان.

ھڪڙو سادو مثال: ھڪڙي جوابي ڪارڊ جو حصو ٺاھيو

هتي هڪ مثال آهي ته توهان Tailwind CSS استعمال ڪندي هڪ جوابي ڪارڊ جزو ڪيئن ٺاهي سگهو ٿا. هي حصو هڪ تصوير، عنوان، ۽ وضاحت تي مشتمل هوندو.

<div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl">
  <div class="md:flex">
    <div class="md:flex-shrink-0">
      <img class="h-48 w-full object-cover md:w-48" src="/img/store.jpg" alt="Store">
    </div>
    <div class="p-8">
      <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">Your Product</div>
      <p class="mt-2 text-gray-500">This is a brief description of your product. The card uses utility classes for padding, text color, and the uppercase font styling.</p>
    </div>
  </div>
</div>

Tailwind CSS سان فارم ٺاهيو

Tailwind CSS سان فارم ٺاهڻ سڌو ۽ سمجهه وارو آهي. هتي هڪ سادي رابطو فارم آهي:

<div class="w-full max-w-xs">
  <form class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
    <div class="mb-4">
      <label class="block text-gray-700 text-sm font-bold mb-2" for="username">
        Username
      </label>
      <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="username" type="text" placeholder="Username">
    </div>
    <div class="mb-6">
      <label class="block text-gray-700 text-sm font-bold mb-2" for="password">
        Password
      </label>
      <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline" id="password" type="password" placeholder="******************">
    </div>
    <div class="flex items-center justify-between">
      <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="button">
        Sign In
      </button>
    </div>
  </form>
</div>

Tailwind CSS کي ترتيب ڏيڻ

Tailwind CSS توهان کي ان جي ڊفالٽ ترتيب ترتيب ڏيڻ جي اجازت ڏئي ٿي، يوٽيلٽي ڪلاس کي توهان جي ضرورتن مطابق ترتيب ڏيڻ. هيٺ ڏنل هڪ مثال آهي ته ڪيئن رنگ جي پيٽ کي ترتيب ڏيڻ لاء.

اهي مثال Tailwind CSS جي لچڪ ۽ سادگي کي ظاهر ڪن ٿا، ڏيکارين ٿا ته اهي ڪيئن توهان جي مدد ڪري سگهن ٿا جديد، جوابي ويب اجزاء کي موثر ۽ مؤثر طريقي سان ٺاهڻ ۾.

module.exports = {
  theme: {
    extend: {
      colors: {
        'custom-blue': '#243c5a',
        'custom-green': '#387c6d',
      }
    }
  }
}

ڇا مونکي ڪنهن CSS فائل جي ضرورت پوندي؟

Tailwind CSS سان توهان کي صرف هڪ فائل جي ضرورت آهي tailwind.config.js فائل.

اھو فائل توھان جي ٺاھ جوڙ جي سيٽنگون رکندو. توهان نه لکندا css يا ڪا ٻي CSS فائل. ھي ٺاھ جوڙ واري فائل صرف ھڪڙي آھي توھان کي ضرورت پوندي.

Tailwind CSS لاءِ بهترين طريقا ڪهڙا آهن؟

Tailwind CSS جي بهترين طريقن تي تفصيلي وضاحت لاءِ، مھرباني ڪري اسان جو ٻيو مضمون ڏسو Tailwind CSS بھترين عمل.

Tailwind CSS: ويب ڊيزائن جو مستقبل

انهي تي غور ڪريو ته Tailwind CSS ويب ڊيزائن جي مستقبل کي ڪيئن ٺاهيندي آهي. ويب ڊولپمينٽ انڊسٽري ۾ ان جي اثر ۽ ترقي جي صلاحيت بابت ڄاڻو.

تازه ترين رهڻ چاهيو ٿا؟
شامل ٿيو DivMagic اي ميل لسٽ!

خبرن، نئين خاصيتن ۽ وڌيڪ بابت ڄاڻڻ لاء پهريون ٿيو!

ڪنهن به وقت رڪنيت ختم ڪريو. ڪو به فضول.

© 2024 DivMagic, Inc. سڀ حق محفوظ آهن.