要素の透明度を指定するプロパティです。0（完全透明）から1（完全不透明）の間で指定します。子要素も含めて透明度が適用されるため、背景だけを透明にしたい場合はRGBAを使用します。
opacity: <number>| opacity-50 | opacity: 0.5 |
| opacity-0 | opacity: 0 |
一般形: opacity-{n}（0〜100）
任意値: opacity-[0.85]
色だけ半透明にするなら bg-red-500/50 のような透明度修飾の方が適切。
.element {
opacity: 1;
}opacity: 1;完全に不透明（デフォルト）
opacity: 0.5;半透明（背景が透けて見える）
opacity: 0.1;ほぼ透明（うっすらと見える）
display: noneと違い、要素の領域は確保される。アニメーションにも対応。
opacityは子要素も道連れに透過します。「背景だけ半透明にしたい」ならopacityではなく背景色のアルファ値（rgba/色 + 透明度）が正解で、この取り違えはAIにも頻発します。またopacityが1未満の要素は新しいスタッキングコンテキストを作るため、z-indexの挙動が変わる副作用があります。
「テキストはくっきり、背景だけ半透明」のカードを、opacityを使わずに実装して
opacityを付けたら重なり順がおかしくなった。スタッキングコンテキストの観点で調査して
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。