🍬

CSS で Tailwind CSS の bg-black/75 みたいなことをする

2025/08/14に公開

Tailwind CSS では bg-black/75 のように カラーパレット/透明度 という表現が可能です。

これと似たようなことを CSS でやろうとするとき、私の場合は 0, 0, 0 のような RGB の値部分を CSS カスタムプロパティとして定義して rgb() で使うか rgba() で使うかを利用時に選択することが多いです。

--color-black: 0, 0, 0;

background-color: rgb(var(--color-black));
background-color: rgba(var(--color-black), 0.75);

これでも良いのですが、透明度を指定したい箇所が限定的なときに都度 rgb() を書くのは煩雑だと感じます。
また、定義するときに HEX カラーコードを利用できないのも個人的は改善したいです。

そこで利用できるのが相対値構文 (Relative value syntax) です。

相対値構文

相対値構文は rgb() で利用できる、基準となる色から R, G, B を取り出し、別の色にできる構文です。

具体的には次のように from キーワードと併せて利用できます。

rgb(from green r g b);

この機能と rgb(r g b / A) のアルファチャンネル値の指定を併用することで、 Tailwind CSS の bg-black/75 のような表現が可能になります。

コード例

カラーパレットを CSS カスタムプロパティとして定義しつつ、透明度を指定したい箇所では rgb() の相対値構文を利用します。

--color-black: #000;

background-color: var(--color-black);
background-color: rgb(from var(--color-black) r g b / 0.75);

また、 Chrome 139 からでのみ利用できる CSS カスタム関数を併用することで、よりシンプルな記述が可能です。

https://drafts.csswg.org/css-mixins-1/

@function --color-alpha(--color, --alpha) {
  result: rgb(from var(--color) r g b / var(--alpha));
}

background-color: --color-alpha(var(--color-black), 0.75);

GitHubで編集を提案

相対値構文

コード例

Discussion