Tailwind Configでカスタム透明度値を定義
tailwind.config.jsでカスタムの透明度値を定義し、bg-opacityやtext-opacityなどのユーティリティクラスで精密な透明度制御を行います。
Colors
詳細な説明
カスタム透明度値
Tailwindは標準の透明度値セット(0、5、10、20、25、...、100)を提供しています。デザインシステムが非標準の透明度を必要とする場合、拡張できます。
カスタム透明度の追加
これによりopacity-15、bg-black/15、text-white/85などのクラスが使えるようになります。
Extend vs Override
透明度を拡張すると、カスタム値と並んでデフォルトが利用可能のままになります。上書きすると、標準スケールに依存するクラスが壊れる可能性があります。
ユースケース
デザインシステムがTailwindのデフォルトの5%ステップスケールと合わない精密な透明度レベルを指定する場合にカスタム透明度値を使用してください。