不透明度

要素の不透明度を制御するためのユーティリティ。

Class reference

Class
Properties
.opacity-0opacity: 0;
.opacity-25opacity: 0.25;
.opacity-50opacity: 0.5;
.opacity-75opacity: 0.75;
.opacity-100opacity: 1;

使用方法

.opacity-{amount}ユーティリティを使用して要素の不透明度を制御します。

.opacity-100
.opacity-75
.opacity-50
.opacity-25
.opacity-0
<div class="opacity-100">.opacity-100</div>
<div class="opacity-75">.opacity-75</div>
<div class="opacity-50">.opacity-50</div>
<div class="opacity-25">.opacity-25</div>
<div class="opacity-0">.opacity-0</div>

レスポンシブ

特定のブレークポイントで要素の不透明度を制御するには、既存の不透明度ユーティリティに{screen}:プレフィックスを追加します。 たとえば、md:opacity-50を使用して、中程度の画面サイズ以上でのみopacity-50ユーティリティを適用します。

Tailwindのレスポンシブデザイン機能の詳細については、Responsive Designのドキュメントをご覧ください。

<div class="opacity-100 sm:opacity-75 md:opacity-50 lg:opacity-25 xl:opacity-0 ...">
  <!-- ... -->
</div>

カスタマイズ

Opacity Scale

デフォルトでは、Tailwindは単純な数値スケールに基づいて5つの不透明度ユーティリティを提供します。 Tailwind構成のtheme.opacityセクションを編集して、これらを変更、追加、または削除します。

  // tailwind.config.js
  module.exports = {
    theme: {
      opacity: {
        '0': '0',
-       '25': '.25',
-       '50': '.5',
-       '75': '.75',
+       '10': '.1',
+       '20': '.2',
+       '30': '.3',
+       '40': '.4',
+       '50': '.5',
+       '60': '.6',
+       '70': '.7',
+       '80': '.8',
+       '90': '.9',
        '100': '1',
      }
    }
  }

レスポンシブと疑似バリアントクラス

デフォルトでonly responsive, hover and focus バリアントはopacity utilitiesのために作られます。

あなたはどのバリアントがopacity utilitiesのために作られるかを tailwind.config.jsファイル内のvariantsセクションのopacityプロパティを修正することによってコントロールできます。

例として、この設定は also active and group-hover バリアントを作ります。

  // tailwind.config.js
  module.exports = {
    variants: {
      // ...
-     opacity: ['responsive', 'hover', 'focus'],
+     opacity: ['responsive', 'hover', 'focus', 'active', 'group-hover'],
    }
  }

無効にする

もしopacity utilitiesを使う予定がないなら、configファイルのcorePluginsセクションのopacity propertyfalseに設定することで完全に無効にすることができます。

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     opacity: false,
    }
  }

Translated by T.Arai @ Entap,Inc. / スマホアプリ開発会社

Tailwind UI is now in early access!