Tailwind basic interactivity

សម្រាប់មេរៀន interactivity នេះយើងសិក្សាអំពី action ដោយយើងលើក action button មានដូចជា hover, focus, action

Button

<button class="bg-black text-white px-5 py-3 rounded-lg">Summit</button>

hover

<button class="bg-black text-white px-5 py-3 rounded-lg
        hover:bg-pink-200 hover:text-blue-500">hover</button>

focus

<button class="bg-black text-white px-5 py-3 rounded-lg
        focus:bg-emerald-400 focus:text-white">focus</button>

active

<button class="bg-black text-white px-5 py-3 rounded-lg
        active:bg-yellow-400 active:text-white">Active</button>

style base on parent state

<a href=""
    class="group block max-w-xs mx-auto shadow-lg bg-gray-100 p-6 rounded-lg space-y-3
    hover:bg-pink-200"
>
    <h1 class="group-hover:text-emerald-300">Card Tittle</h1>
    <p>This is the card text</p>
</a>

mx stand for margin x horizontal and y verizontal

space-y ដកឃ្លាជួលើនិងជួក្រោម

 <div class=" group relative rounded w-32 h-32 bg-slate-700 grid grid-row place-content-center">
        <div>
            <Icon name="github" width={70} height={70} />
        </div>
        <div class=" hidden absolute group-hover:grid grid-rows place-content-center w-full h-full bg-gray-800/40 ">
            <span>Github</span>
        </div>
    </div>

---

User selecte

User selecte

select-none

select-text

select-all

select-auto

<div class="select-none">select-none </div>
<div class="select-text">select-text</div>
<div class="select-all">select-all</div>
<div class="select-auto">select-auto</div>