【Tailwind和訳】TYPOGRAPHY/Text Opacity

この記事について

この記事は、TYPOGRAPHY/Text Opacityの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

Text Opacity

要素のテキストカラーの不透明度をコントロールするためのユーティリティ。

Class	Properties
text-opacity-0	--tw-text-opacity: 0;
text-opacity-5	--tw-text-opacity: 0.05;
text-opacity-10	--tw-text-opacity: 0.1;
text-opacity-20	--tw-text-opacity: 0.2;
text-opacity-25	--tw-text-opacity: 0.25;
text-opacity-30	--tw-text-opacity: 0.3;
text-opacity-40	--tw-text-opacity: 0.4;
text-opacity-50	--tw-text-opacity: 0.5;
text-opacity-60	--tw-text-opacity: 0.6;
text-opacity-70	--tw-text-opacity: 0.7;
text-opacity-75	--tw-text-opacity: 0.75;
text-opacity-80	--tw-text-opacity: 0.8;
text-opacity-90	--tw-text-opacity: 0.9;
text-opacity-95	--tw-text-opacity: 0.95;
text-opacity-100	--tw-text-opacity: 1;

使い方

text-opacity-{amount}ユーティリティを使って、要素のテキストカラーの opacity を制御します。

<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}ユーティリティが同じ要素に存在していないと動作しません。

❌ 継承されたテキストカラーにテキストの opacity ユーティリティーを使用しようとしないでください。

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

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

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

レスポンシブ

特定のブレークポイントで要素のテキストカラーの opacity を制御するには、既存のテキストカラーの opacity ユーティリティーに{screen}:というプレフィックスを追加します。例えば、md:text-opacity-50を使うと、text-opacity-50ユーティリティを medium スクリーンサイズ以上でのみ適用することができます。

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

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

カスタマイズ

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

tailwind.config.js

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

テキストの opacity のユーティリティーだけをカスタマイズしたい場合は、textOpacityセクションを使用してください。

tailwind.config.js

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

デフォルトテーマのカスタマイズについては、テーマのカスタマイズに関するドキュメントをご覧ください。

バリアント

デフォルトでは、レスポンシブ、ダークモード（有効な場合）、group-hover、focus-within、hover、focusの各バリアントのみがテキストの不透明度のユーティリティ用に生成されます。

tailwind.config.jsファイルのvariantsセクションにあるtextOpacityプロパティを変更することで、テキストの不透明度のユーティリティのために生成されるバリアントをコントロールすることができます。

例えば、このコンフィグはアクティブなバリアントも生成します。

tailwind.config.js

  module.exports = {
    variants: {
      extend: {
        // ...
+       textOpacity: ['active'],
      }
    }
  }

無効化

もし、プロジェクトでテキストの opacity のユーティリティーを使う予定がなければ、設定ファイルのcorePluginsセクションでtextOpacityプロパティをfalseに設定することで、完全に無効にすることができます。

tailwind.config.js

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