Tailwind Configでカスタム透明度値を定義

tailwind.config.jsでカスタムの透明度値を定義し、bg-opacityやtext-opacityなどのユーティリティクラスで精密な透明度制御を行います。

Colors

詳細な説明

カスタム透明度値

Tailwindは標準の透明度値セット(0、5、10、20、25、...、100)を提供しています。デザインシステムが非標準の透明度を必要とする場合、拡張できます。

カスタム透明度の追加

これによりopacity-15bg-black/15text-white/85などのクラスが使えるようになります。

Extend vs Override

透明度を拡張すると、カスタム値と並んでデフォルトが利用可能のままになります。上書きすると、標準スケールに依存するクラスが壊れる可能性があります。

ユースケース

デザインシステムがTailwindのデフォルトの5%ステップスケールと合わない精密な透明度レベルを指定する場合にカスタム透明度値を使用してください。

試してみる — Tailwind Config Builder

フルツールを開く