【Tailwind和訳】TYPOGRAPHY/Placeholder Opacity

この記事について

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

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

Placeholder Opacity

要素のプレースホルダーカラーの Opacity をコントロールするユーティリティーです。

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

使い方

placeholder-opacity-{amount}ユーティリティーを使って、要素のプレースホルダーカラーの opacity を制御します。

<input class="placeholder-gray-500 placeholder-opacity-100 ..." placeholder="[e-mail]" />
<input class="placeholder-gray-500 placeholder-opacity-75 ..." placeholder="[e-mail]" />
<input class="placeholder-gray-500 placeholder-opacity-50 ..." placeholder="[e-mail]" />
<input class="placeholder-gray-500 placeholder-opacity-25 ..." placeholder="[e-mail]" />
<input class="placeholder-gray-500 placeholder-opacity-0 ..." placeholder="[e-mail]" />

レスポンシブ

特定のブレークポイントで要素のプレースホルダーの色の opacity を制御するには、既存のプレースホルダーの色の opacity ユーティリティーに{screen}:というプレフィックスを追加します。例えば、md:placeholder-opacity-50を使うと、placeholder-opacity-50ユーティリティーを中程度のスクリーン・サイズ以上でのみ適用します。

<input
  class="placeholder-gray-500 placeholder-opacity-75 md:placeholder-opacity-50 ..."
  placeholder="[e-mail]"
/>

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

カスタマイズ

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

tailwind.config.js

  module.exports = {
    theme: {
      extend: {
        opacity: {
+         '15': '0.15',
+         '35': '0.35',
+         '65': '0.65',
        }
      }
    }
  }

プレースホルダーの opacity のユーティリティーだけをカスタマイズしたい場合は、placeholderOpacityセクションを使用してください。

tailwind.config.js

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

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

バリアント

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

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

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

tailwind.config.js

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

無効化

プレースホルダーの不透明度のユーティリティーをプロジェクトで使用しない場合は、設定ファイルのcorePluginsセクションでplaceholderOpacityプロパティをfalseに設定することで、完全に無効にすることができます。

tailwind.config.js

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