Tailwind CSSIntermediate

Hover, Focus & State Variants

Tailwind-এ hover, focus, active, disabled state variant — interactive styling বাংলায়।

11টি অংশবাংলা ভাষায়

Tailwind-এ pseudo-class variants prefix হিসেবে ব্যবহার হয় — যেমন hover:, focus:, active:।

Hover State

<!-- hover এর সময় পরিবর্তন -->
<button class="bg-blue-500 hover:bg-blue-700 text-white px-4 py-2 rounded-lg">
  Hover করুন
</button>

<!-- hover এ text color -->
<a href="#" class="text-blue-500 hover:text-blue-700 hover:underline">
  Link hover
</a>

Focus State

<!-- focus ring -->
<input
  class="border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
  placeholder="Input focus করুন"
/>

<!-- focus-within -->
<div class="focus-within:shadow-lg">
  <input placeholder="Parent detect করবে" />
</div>

Active & Disabled

<!-- active (click করার সময়) -->
<button class="bg-blue-500 active:bg-blue-800 text-white px-4 py-2 rounded-lg">
  Active state
</button>

<!-- disabled -->
<button class="bg-blue-500 disabled:bg-gray-300 text-white px-4 py-2 rounded-lg" disabled>
  Disabled button
</button>

Group Variants

Parent-কে group দিলে child element parent-এর state-এর উপর ভিত্তি করে style করতে পারে।

<!-- group hover -->
<div class="group cursor-pointer">
  <img src="photo.jpg" class="group-hover:opacity-75 transition-opacity" />
  <p class="group-hover:text-blue-600">Hover parent, child change</p>
</div>

Transition যোগ করুন

Smooth animation-এর জন্য transition-all duration-200 class যোগ করুন। এতে hover/focus state smooth transition হবে।

শেষ প্যারায় নিজে practice করুন — কোড কপি করে নিজের এডিটরে চালিয়ে দেখুন।