Tailwind CSS v3 で text や border の opacity の設定の仕方が変わった

Tailwind CSS v3 で text や border の opacity の設定の仕方が変わっていたらしい。

例:

text-black text-opacity-50 → text-black/50
border-black border-opacity-50 → border-black/50

v2 までの記法も使えるが、非推奨になっているらしい。

These utilities have been deprecated since we released v3. They still "work" but are discouraged. We suggest you use the new border-{color}/{opacity} modifiers introduced in v3.0 instead. For example the following border border-opacity-25 becomes border border-gray-200/25.

dqn

この更新はブログや Upgrade Guide には書かれていない。

CHANGELOG には一応書いてあるが、実装まで見ないとどう変わったのか分からず気付きづらい。

Preserve original color format when adding opacity whenever possible (#5154)

dqn

v2 まであった Border Opacity という項は v3 では消えていて、Border Color の項に新しい記法で追加されていた。

dqn

もし opacity のみ変更したいというケースがある場合は v3 からの記法は不便かもしれないが、そもそも CSS に text や border の opacity のみ変更するというプロパティはないので、これが正しいのかもしれない。