テキストの不透明度

Tailwind CSS version
v1.4.0+

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

Class reference

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

使用方法

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

The quick brown fox jumped over the lazy dog.

The quick brown fox jumped over the lazy dog.

The quick brown fox jumped over the lazy dog.

The quick brown fox jumped over the lazy dog.

The quick brown fox jumped over the lazy dog.

<p class="text-purple-700 text-opacity-100">The quick brown fox ...</p>
<p class="text-purple-700 text-opacity-75">The quick brown fox ...</p>
<p class="text-purple-700 text-opacity-50">The quick brown fox ...</p>
<p class="text-purple-700 text-opacity-25">The quick brown fox ...</p>
<p class="text-purple-700 text-opacity-0">The quick brown fox ...</p>

これらのユーティリティはCSSカスタムプロパティを使用して実装されているため、これらが機能するには、.text-{color}ユーティリティが同じ要素に存在する必要があることに注意してください。

継承されたテキストの色でテキスト不透明度ユーティリティを使用しようとしないでください

<div class="text-black">
  <div class="text-opacity-50">...</div>
</div>

同じ要素にテキストカラーユーティリティを明示的に追加してください

<div class="text-black">
  <div class="text-black text-opacity-50">...</div>
</div>

Responsive

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

<div class="text-blue-500 text-opacity-75 md:text-opacity-50">
  <!-- ... -->
</div>

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

Customizing

すべての不透明度関連ユーティリティの不透明度値を一度にカスタマイズするには、tailwind.config.jsテーマ設定のopacityセクションを使用します。

  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        opacity: {
+         '10': '0.1',
+         '20': '0.2',
+         '95': '0.95',
        }
      }
    }
  }

テキスト不透明度ユーティリティのみをカスタマイズする場合は、textOpacityセクションを使用します。

  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        textOpacity: {
+         '10': '0.1',
+         '20': '0.2',
+         '95': '0.95',
        }
      }
    }
  }

デフォルトテーマのカスタマイズについてはテーマのカスタマイズをご覧ください。

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

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

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

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

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

無効にする

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

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

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

Tailwind UI is now in early access!