プレースホルダーの不透明度

Tailwind CSS version
v1.4.0+

要素のプレースホルダーの色の不透明度を制御するためのユーティリティ。

Class reference

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

使用方法

.placeholder-opacity-{amount}ユーティリティを使用して、要素のプレースホルダーの色の不透明度を制御します。

<input class="placeholder-gray-500 placeholder-opacity-100 ..." placeholder="jane@example.com">
<input class="placeholder-gray-500 placeholder-opacity-75 ..." placeholder="jane@example.com">
<input class="placeholder-gray-500 placeholder-opacity-50 ..." placeholder="jane@example.com">
<input class="placeholder-gray-500 placeholder-opacity-25 ..." placeholder="jane@example.com">
<input class="placeholder-gray-500 placeholder-opacity-0 ..." placeholder="jane@example.com">

レスポンシブ

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

<input class="placeholder-opacity-75 md:placeholder-opacity-50 placeholder-gray-500" placeholder="jane@example.com">

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

カスタマイズ

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

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

プレースホルダーの不透明度ユーティリティのみをカスタマイズする場合は、placeholderOpacityセクションを使用します。

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

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

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

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

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

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

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

無効にする

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

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

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

Tailwind UI is now in early access!