د Tailwind رنګ جوړونه

د یوه رنګ له Hex کوډ څخه د Tailwind CSS د 50 څخه تر 950 پورې 11 درجو پالیټ او د تنظیماتو کوډ جوړوي

د اپډیټ معلوماتد Tailwind د رنګ جوړونې اضافه شوه، د یو رنګ څخه د 11 درجو رنګونه او د تنظیم کوډ جوړیږيد تازه معلوماتو لیدل

ځانګړتیاوې

د یوه رنګ له مخې 11 درجو خپلکارې جوړونه

ننوتلی رنګ په 500 کې ځای په ځای کوي او د 50 څخه تر 950 پورې رنګونه محاسبه کوي

د v3 او v4 دواړو بڼو ملاتړ

د config او @theme لیکلو ډولونه د ټب له لارې بدلول

د هرې درجې Hex کاپي کول

د هرې رنګ نمونې د ځانګړي تڼۍ له لارې کوډ یو په یو کاپي کول

د ننوتلو سره سم پالیټ تازه کول

د اجرا تڼۍ ته اړتیا نشته، رنګونه هڅه او پرتله کړئ

د کارولو طریقه

د اساسي رنګ Hex ننویسئ

Hex کوډ ولیکئ یا د چپ خوا رنګ نمونې کلیک کړئ او د رنګ ټاکونکي له لارې یې وټاکئ

که اړتیا وي، د رنګ نوم ولیکئ

هغه رنګ نوم چې په کوډ کې کارول کیږي، په انګلیسي کوچنیو توریو ولیکئ. که تشه پریږدئ، primary کارول کیږي

د 11 درجو رنګ نمونې وګورئ

د 50 څخه تر 950 پورې رنګ نمونې او Hex کوډونه وګورئ، او د نمونې کاپي تڼۍ په واسطه یو په یو کاپي کړئ

د وتلو بڼه وټاکئ او کاپي یې کړئ

v3 یا v4 وټاکئ او د "کوډ کاپي کول" له لارې یې په tailwind.config.js یا CSS فایل کې لیکئ

د کارونې بېلګې

د برانډ رنګ درجو جوړول

د تڼۍ د hover او شاليد لپاره کارېدونکي رنګونه د برانډ یوه رنګه له مخې سم کړئ

هغو رنګونو زیاتول چې په معیاري پالیټ کې نشته

هغه ځانګړي رنګونه چې د پروژې لپاره دي خو په Tailwind معیاري رنګونو کې نشته، د 11 درجو په بڼه تنظیماتو فایل ته زیات کړئ

د v4 @theme تنظیماتو جوړول

د سایټ له اصلي رنګ څخه د Tailwind v4 CSS متغیرونه په ټولیزه توګه جوړ کړئ

د ډیزاین نقشې د پلي کولو چمتووالی

د نقشې له ټاکل شویو رنګونو څخه د پلي کولو لپاره د 11 درجو کوډ چمتو کړئ او ډیزاین وسیلو ته هم ولیکئ

اساسي پوهه

د Tailwind 50 څخه تر 950 پورې ارقام څه معنا لري

د Tailwind CSS رنګونه د 11 درجو ارقامو له لارې د روښانتیا کچه ښيي، چې 50 یې تر ټولو روښانه او 950 یې تر ټولو تیاره ده، او 500 د هغه رنګ اساس بلل کیږي. دغه ارقام د کلاس نوم په پای کې لکه "bg-primary-500" یا "text-primary-700" کارول کیږي.

د 50 څخه تر 300 پورې درجې：د 50 څخه تر 300 پورې درجې ډیری وخت د شالید رنګ یا سپک پوښښ لپاره کارول کیږي، او پر دوی باندې د تیارو توریو ایښودل هم ښه لوستل کیدونکي دي.
د 600 څخه تر 950 پورې درجې：د 600 څخه تر 950 پورې درجې ډیری وخت د تڼۍ د hover یا سرلیکونو د توري رنګ لپاره کارول کیږي، او په سپین شالید باندې هم په ښکاره ډول ترسترګو کیږي.

د v3 او v4 ترمنځ د رنګ ټاکلو طریقې توپیر

په Tailwind CSS v3 کې رنګونه په tailwind.config.js کې د JavaScript په واسطه ټاکل کیږي، خو په v4 کې د CSS فایل د @theme دننه د CSS متغیرونو په توګه ټاکل کیږي. په دواړو طریقو کې ټاکل شوي رنګونه د ورته کلاس نوم لکه "bg-primary-500" سره کارول کیدی شي.

د v3 لیکلو طریقه：د v3 لیکلو طریقه داسې ده چې د theme.extend.colors دننه د رنګ نوم او درجه د "primary: { 500: '#3B82F6' }" په ډول ځای پر ځای کیږي.
د v4 لیکلو طریقه：د v4 لیکلو طریقه داسې ده چې د @theme دننه د رنګ نوم او درجه د هایفن په واسطه لکه "--color-primary-500: #3B82F6;" یوځای کیږي.