☄️سلام عزیزای دلم امروز میخایم در ادامه مباحث TailwindCss به موضوع Spacing ها بپردازیم

خب اول اینکه منظور از Spacing ها همین فاصله ها هستن که شامل padding و margin و یه مبحث جدید و مرتبط به تیلویند به اسم Space Between ( که از اسمشم مشخصه چیه ) میشه

⚡️اول از همه برای margin و padding ما جهت های مختلفی داریم، مثلا پدینگی که از همه طرف اعمال بشه میشه همین p و جهت های خاص هم بعد از p میتونیم بزنیم:

p-0
px-0
py-0
ps-0
pe-0
pt-0
pb-0
pr-0
pl-0

دقت کنین به جای 0 میتونین از اون اندازه هایی که جلسه قبل باهم حرف زدیم دربارش استفاده کنین، مثلا : p-24
برای مارجین هم دقیقا به همین صورته فقط به جای p از m استفاده کنین

🔥خب حالا spece between چیه داستانش؟ بخاییم خلاصه بگیم اول باید اشاره کنم به اینکه ما داخل css یسری پراپرتی هایی داریم توی دیسپلی های خاصی که فاصله بین ایتم هارو مشخص میکنه، مثلا داخل دیسپلی flex و grid ، ما میتونیم با استفاده از gap بیایم و مشخص کنیم ایتم های ما چقدر از هم فاصله داشته باشن، اما نمیشه به صورت معمولی توی خیلی از دیسپلی ها این gap رو استفاده کرد، خب حالا تیلویند اومده با اضافه کردن space-between کلی کارمون رو راحت کرده و مارو از اینکه بخایم بین ایتم ها فاصله بندازیم و حتما از یسری دیسپلی ها استفاده کنیم راحت کرده!
استفادش خیلی سادس، شما میاین یه جهت و اندازه میدین و تمام، اینم مثالش:

space-y-4
space-x-10

الان این قسمت یعنی ایتم های داخل المنت ما، از محور عمودی یا همون y به مقدار 4 واحد فاصله بگیرن و از محور افقی یا همون x به اندازه 10 واحد، هیچ نیازیم به دیسپلی و این کارا نیست چون اینا با یه سیستم مارجین دهی هندل میشن در اصل

👑یه مثال ببینیم باهم:

    <div class="px-5 mx-auto mt-24 bg-black space-y-5 space-x-5 max-w-sm">
        <div class="size-24 bg-red"></div>
        <div class="size-24 bg-red"></div>
        <div class="size-24 bg-red"></div>
        <div class="size-24 bg-red"></div>
        <div class="size-24 bg-red"></div>
        <div class="size-24 bg-red"></div>
    </div>

👋خب این مبحث تیلویند هم تموم شد امیدوارم لذت برده باشین
#tailwind #tailwind_4
☕️ @CodeExplore