کداکسپلور | CodeExplore

📌

خب بچه ها امروز میخایم یکم کار با تیلویند رو جذاب تر کنیم و در ادامه مباحث TailwindCss به یسری قسمت های قشنگ تری برسیم

خب اول از همه باید بگم ما وقتی از تیلویند استفاده میکنیم دیگه نیاز نیست پاشیم بریم برای افکت های hover و focus جداگونه css بزنیم
و خیلی خیلی راحت میشه این افکت ها و سلکتور هارو داخل تیلویند به کار برد😂
توی مثال پایین براتون هاور و فکوس رو آوردم:

<button class="bg-sky-500 hover:bg-sky-700 hover:text-9xl focus:bg-red-500">
  Save changes
</button>

◀️خب الان ما گفتیم مثلا موقع هاور شدن این دکمه، بک گراندش عوض شه و سایز متنش بزرگ تر بشه، و وقتی هم روش عملیات فکوس رخ داد بک گراندش قرمز شه

حالا ما میتونیم بیایم مشخص کنیم وقتی مثلا فیلد هایی که داریم، required هستن یا disabled شدن، باز استایل هاشون عوض شه (یعنی وقتی اتریبیوت های مربوطه رو گرفتن)

<button class="bg-sky-500 disabled:opacity-50 required:text-red-500">
  Save changes
</button>

خیلی جالب تر میشه اگه بگم ما حتی میتونیم first-child و last-child و... هم مشخص کنیم!

<li class="flex py-4 first:pt-0 last:pb-0 even:bg-red-500 odd:bg-green-200">
      <img class="h-10 w-10 rounded-full" src="{person.imageUrl}" alt="" />
      <div class="ml-3 overflow-hidden">
        <p class="text-sm font-medium text-slate-900">{person.name}</p>
        <p class="text-sm text-slate-500 truncate">{person.email}</p>
      </div>
    </li>

✅اینا که چیزی نیست داداش، حتی به شبه المنت هایی مثل after و before المنت هم دسترسی داریم! مثال رو دقت کنین:

<div class="before::text-xl after:border"></div>

یه وقتایی هم پیش میاد که بخایم بگیم اره اگه فلان المنت راست چین یا چپ چین بود ( همون direction ) یسری استایل های متفاوت بگیره:

<div class="rtl:text-2xl ltr:bg-green-200"></div>

خب تا اینجا که هم اسون بود هم جذاب و منم فقط لیست کردم واستون
اما میخایم حالا راجب یه کار خفن دیگه صحبت کنیم باهم
🔥ببینین همه میدونیم یه وقتایی ما یسری المنت داریم که به هم مربوطن و گروهی کار میکنن، و میخام نسبت به هم یسری اتفاقا داخلشون بیوفته، یعنی اگه فلانی هاور شد این یکی یه اتفاق دیگه براش بیوفته، اینجاس که تیلویند اومده group هارو برامون ردیف کرده
شما اول از همه میاین یه گروه تشکیل میدین با استفاده از کلاس group و بعد از اون هم تگ هایی که داخل این گروه وجود دارن میتونن نسبت به هم گروهی هاشون واکنش نشون بدن
با مثلا راحت میشه درکش کرد و من این مثال رو از داک تیلویند میارم:

<a href="#" class="group block max-w-xs mx-auto rounded-lg p-6 bg-white ring-1 ring-slate-900/5 shadow-lg space-y-3 hover:bg-sky-500 hover:ring-sky-500">
  <div class="flex items-center space-x-3">
    <svg class="h-6 w-6 stroke-sky-500 group-hover:stroke-white" fill="none" viewBox="0 0 24 24"><!-- ... --></svg>
    <h3 class="text-slate-900 group-hover:text-white text-sm font-semibold">New project</h3>
  </div>
  <p class="text-slate-500 group-hover:text-white text-sm">Create a new project from a variety of starting templates.</p>
</a>

👑داخل این قسمت رو که نگاه کنین ما به تگ a یه کلاس group دادیم و اینطوری یه گرروه تشکیل دادیم از همه اینا، داخل این گروهمون دو جا کلاس group-hover رو میبینیم که خب اینطوری میشه معنیش کرد که وقتی کل این گروه ما(نه فقط یه المنت خاص) هاور شد، بیا متن فلان المنت رو سفید کن

ما این مورد رو فقط برای hover نداریم، برای focus و active و حتی odd و even هم داریمش فقط متنش عوض میشه و کاربردش که بلدین

این مبحث سلکتور ها خیلی خیلی طولانیه و اگر وقت شد در آینده باز هم دربارش توضیح میدیم

#tailwind #tailwind_8

☕️

@CodeExplore

Please open Telegram to view this post