Effects

Classes for visual effects.

Opacity

Class	Description
`.opacity-0`	Fully transparent
`.opacity-25`	25% opacity
`.opacity-50`	50% opacity
`.opacity-75`	75% opacity
`.opacity-100`	Fully opaque

Rotate

Class	Description
`.rotate-0`	No rotation
`.rotate-45`	45° rotation
`.rotate-90`	90° rotation
`.rotate-180`	180° rotation
`.rotate--45`	-45° rotation
`.rotate--90`	-90° rotation

50%

45°

180°

<div class="flex gap-4 items-center">
  <div
    class="w-16 h-16 bg-blue-500 rounded opacity-50 flex items-center justify-center text-xs text-white"
  >
    <p>50%</p>
  </div>
  <div
    class="w-16 h-16 bg-green-500 rounded rotate-45 flex items-center justify-center text-xs text-white"
  >
    <p>45°</p>
  </div>
  <div
    class="w-16 h-16 bg-red-500 rounded rotate-180 flex items-center justify-center text-xs text-white"
  >
    <p>180°</p>
  </div>
</div>

Hover Opacity

Просмотр
Код

Hover me

<div
  class="w-32 h-16 bg-blue-500 rounded hover:opacity-50 cursor-pointer flex items-center justify-center text-xs text-white"
>
  <p>Hover me</p>
</div>