Skip to content

Tailwind:HandlingStates

Handling Hover, Focus, and Other States

Group

Tooltip example 

<div class="group flex relative">
    <span class="bg-red-400 text-white px-2 py-1">Button</span>
    <span class="group-hover:opacity-100 transition-opacity bg-gray-800 px-1 text-sm text-gray-100 rounded-md absolute left-1/2 -translate-x-1/2 translate-y-full opacity-0 m-4 mx-auto">Tooltip</span>
</div>

prefix 를 tw-로 적용했다면: 

<div className="tw-group ...">
  <BiFileEarmarkPdf />
  <span className="group-hover:tw-opacity-70 tw-opacity-0 ...">PDF</span>
</div>

See also

Favorite site