opacity で困った！

opacity vs rgba

opacity の挙動が怪しいと思ったので調べました。

子要素の text や background の不透明度をすべて変更する

スタイルを指定した要素のみに不透明度を設定する

rgba を使用した container では、子要素に影響を与えないが、opacity を使用した container-opacity は子要素の background と text に不透明度が設定されている。

See the Pen Untitled by shiraishi yuma (@punkshiraishi) on CodePen.

１回目から崩れずに表示されるようになりました。

opacity 属性による指定では、より多くの要素をレンダリングすることになる。Vue による DOM の生成のタイミングなどの条件と重なり、表示崩れを起こしてしまった。

一方 rgba では単一の要素にしか影響を与えないので、レンダリング処理がシンプルになり、問題が解消したのではないか。

opacity: xx; を付与します。

rgba で不透明度を指定します。

bg-red-500 は下記のようなスタイルが付与されます。

.bg-red-500 {
    --tw-bg-opacity: 1;
    background-color: rgba(185,28,28,var(--tw-bg-opacity));
}

--tw-bg-opacity は変数で、bg-opacity によって指定できます。

.bg-opacity-50 {
  --tw-bg-opacity: 0.5;
}

opacity は影響範囲を理解して使いましょう。
特定の要素の不透明度を変えたいときはなるべく rgba を使った方が良さそうです。