☄️خوش اومدین به یک پست دیگه از آموزش های TailwindCss

◀️در ادامه مباحث قبلی ما رسیدیم به گروه بندی و اینکه چطور مشخص کنیم اگه گروهمون هاور شد فلان اتفاق بیوفته
حالا امروز میخام بیشتر عمیق بشیم توی این مبحث و جزئیات بیشتری رو پیش ببریم

ببینین اول از همه بزارین من مثال کدشو که از داک خود تیلویند اوردم نشونتون بدم:

<ul role="list">
  {#each people as person}
    <li class="group/item hover:bg-slate-100 ...">
      <img src="{person.imageUrl}" alt="" />
      <div>
        <a href="{person.url}">{person.name}</a>
        <p>{person.title}</p>
      </div>
      <a class="group/edit invisible hover:bg-slate-200 group-hover/item:visible ..." href="tel:{person.phone}">
        <span class="group-hover/edit:text-gray-700 ...">Call</span>
        <svg class="group-hover/edit:translate-x-0.5 group-hover/edit:text-slate-500 ...">
          <!-- ... -->
        </svg>
      </a>
    </li>
  {/each}
</ul>

یکم پهپ قاطیش کردن بیخیال شما کلاس های تیلویند رو دریابین
اینجا ما یه سینتکس داریم که به این صورت نوشته شده:

group/{name}
group-hover/{name}

الان ما با این اسم حرکت به المنت خودمون یه اسم میدیم تا توی گروهی که ساختیم انتخابش کنیم و با اون اسم بهش دسترسی داشته باشیم
💎توی مثال بالا، هر li ما داخل گروه اسمش item هست و اون پایین ترش داخل تگ a که اسم edit گرفته، گفته هروقت روش هاور شد، ایتم ما برای فلان اتفاق بیوفته و راحت دسترسی داره به اون تگ داخل گروه

حالا پایین تر رو ببینین:

<div class="group is-published">
  <div class="hidden group-[.is-published]:block">
    Published
  </div>
</div>

اینجا دیگه خیلی خفن شده و گفتیم این گروه ما هروقت کلاس is-published گرفتن، فلان تگ ما دیسپلی block بگیره، یعنی راحت میتونیم سلکتور های مختلفی رو ست کنیم و کلی با جی اس بلا سرش بیاریم

یا حتی میتونیم مثل کد پایین بیایم و با سلکتور های دیگه کار کنیم، قبلا راجب این براکت های باز و بسته گفتم توی تیلویند:

<div class="group">
  <div class="group-[:nth-of-type(3)_&]:block">
    <!-- ... -->
  </div>
</div>

✨خب گروه بندی هارو کامل باهم بررسی کردیم
یه مبحث دیگه که خیلی خفنه peer هست ( پیر نیستا جوونه )😂
ما داخل گروه بندی ها، گروهمون طوری بود که المنت ها داخل اون گروه اصلی باشن
ولی داخل peer اینا کنار هم قرار دارن و همینطوری استایل هارو با اسم peer بهشون میدیم

<form>
  <label class="block">
    <span class="block text-sm font-medium text-slate-700">Email</span>
    <input type="email" class="peer ..."/>
    <p class="mt-2 invisible peer-invalid:visible text-pink-600 text-sm">
      Please provide a valid email address.
    </p>
  </label>
</form>

داخل این مثال ما اومدیم کلاس peer رو به input دادیم و بعدش هم به p کنارش گفتیم هروقت input ما invalid بود، نشون داده بشه
درکل سینتکسل کلی اینطوریه که شما مدیفایر رو بعد از peer مشخص میکنین:

peer-{modifire)
peer-focus
peer-required

⚡️یه نکته مهم اینه که این کلاس peer باید قبل از peer-{modifire} ست بشه
حالا ما اون اسم دهی که داخل گروه ها گفتیم رو اینجا هم داریم این مثال رو دقت کنین:

html 
<fieldset>
  <legend>Published status</legend>

  <input id="draft" class="peer/draft" type="radio" name="status" checked />
  <label for="draft" class="peer-checked/draft:text-sky-500">Draft</label>

  <input id="published" class="peer/published" type="radio" name="status" />
  <label for="published" class="peer-checked/published:text-sky-500">Published</label>

  <div class="hidden peer-checked/draft:block">Drafts are only visible to administrators.</div>
  <div class="hidden peer-checked/published:block">Your post will be publicly visible on your site.</div>
</fieldset>

سلکتور ها کلا خیلی طولانیه مبحثش و من یه سلکتور دیگه بگم و بریم:

<ul class="*:bg-sky-50 ...">
  <li class="bg-red-50 ...">Sales</li>
  <li>Marketing</li>
  <li>SEO</li>
  <!-- ... -->
</ul>

👑سلکتور * رو وقتی استفاده میکنیم که بخایم یه استایل رو به تمام فرزندان تگمون بدیم همینطور که توی مثال بالا میبینین

#tailwind #tailwind_9
☕️ @CodeExplore