プレースホルダーカラー

Tailwind CSS version
v1.1.0+

プレースホルダーテキストの色を制御するためのユーティリティ。

Class reference

Class
Preview 
.placeholder-transparent::placeholderAa
.placeholder-current::placeholderAa
.placeholder-black::placeholderAa
.placeholder-white::placeholderAa
.placeholder-gray-100::placeholderAa
.placeholder-gray-200::placeholderAa
.placeholder-gray-300::placeholderAa
.placeholder-gray-400::placeholderAa
.placeholder-gray-500::placeholderAa
.placeholder-gray-600::placeholderAa
.placeholder-gray-700::placeholderAa
.placeholder-gray-800::placeholderAa
.placeholder-gray-900::placeholderAa
.placeholder-red-100::placeholderAa
.placeholder-red-200::placeholderAa
.placeholder-red-300::placeholderAa
.placeholder-red-400::placeholderAa
.placeholder-red-500::placeholderAa
.placeholder-red-600::placeholderAa
.placeholder-red-700::placeholderAa
.placeholder-red-800::placeholderAa
.placeholder-red-900::placeholderAa
.placeholder-orange-100::placeholderAa
.placeholder-orange-200::placeholderAa
.placeholder-orange-300::placeholderAa
.placeholder-orange-400::placeholderAa
.placeholder-orange-500::placeholderAa
.placeholder-orange-600::placeholderAa
.placeholder-orange-700::placeholderAa
.placeholder-orange-800::placeholderAa
.placeholder-orange-900::placeholderAa
.placeholder-yellow-100::placeholderAa
.placeholder-yellow-200::placeholderAa
.placeholder-yellow-300::placeholderAa
.placeholder-yellow-400::placeholderAa
.placeholder-yellow-500::placeholderAa
.placeholder-yellow-600::placeholderAa
.placeholder-yellow-700::placeholderAa
.placeholder-yellow-800::placeholderAa
.placeholder-yellow-900::placeholderAa
.placeholder-green-100::placeholderAa
.placeholder-green-200::placeholderAa
.placeholder-green-300::placeholderAa
.placeholder-green-400::placeholderAa
.placeholder-green-500::placeholderAa
.placeholder-green-600::placeholderAa
.placeholder-green-700::placeholderAa
.placeholder-green-800::placeholderAa
.placeholder-green-900::placeholderAa
.placeholder-teal-100::placeholderAa
.placeholder-teal-200::placeholderAa
.placeholder-teal-300::placeholderAa
.placeholder-teal-400::placeholderAa
.placeholder-teal-500::placeholderAa
.placeholder-teal-600::placeholderAa
.placeholder-teal-700::placeholderAa
.placeholder-teal-800::placeholderAa
.placeholder-teal-900::placeholderAa
.placeholder-blue-100::placeholderAa
.placeholder-blue-200::placeholderAa
.placeholder-blue-300::placeholderAa
.placeholder-blue-400::placeholderAa
.placeholder-blue-500::placeholderAa
.placeholder-blue-600::placeholderAa
.placeholder-blue-700::placeholderAa
.placeholder-blue-800::placeholderAa
.placeholder-blue-900::placeholderAa
.placeholder-indigo-100::placeholderAa
.placeholder-indigo-200::placeholderAa
.placeholder-indigo-300::placeholderAa
.placeholder-indigo-400::placeholderAa
.placeholder-indigo-500::placeholderAa
.placeholder-indigo-600::placeholderAa
.placeholder-indigo-700::placeholderAa
.placeholder-indigo-800::placeholderAa
.placeholder-indigo-900::placeholderAa
.placeholder-purple-100::placeholderAa
.placeholder-purple-200::placeholderAa
.placeholder-purple-300::placeholderAa
.placeholder-purple-400::placeholderAa
.placeholder-purple-500::placeholderAa
.placeholder-purple-600::placeholderAa
.placeholder-purple-700::placeholderAa
.placeholder-purple-800::placeholderAa
.placeholder-purple-900::placeholderAa
.placeholder-pink-100::placeholderAa
.placeholder-pink-200::placeholderAa
.placeholder-pink-300::placeholderAa
.placeholder-pink-400::placeholderAa
.placeholder-pink-500::placeholderAa
.placeholder-pink-600::placeholderAa
.placeholder-pink-700::placeholderAa
.placeholder-pink-800::placeholderAa
.placeholder-pink-900::placeholderAa

使用方法

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

<input class="placeholder-gray-500 border" placeholder="jane@example.com">
<input class="placeholder-red-300 border border-red-400" placeholder="jane@example.com">

Changing opacityv1.4.0+

.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:text-green-600を使用して、中程度の画面サイズ以上でのみtext-green-600ユーティリティを適用します。

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

<input class="placeholder-gray-500 sm:placeholder-red-400 md:placeholder-blue-400 lg:placeholder-green-400 xl:placeholder-orange-400" placeholder="jane@example.com">

Focus

フォーカスされている要素のプレースホルダーの色を制御するには、既存のプレースホルダーの色ユーティリティにfocus:プレフィックスを追加します。 たとえば、focus:placeholder-blue-600を使用して、placeholder-blue-600ユーティリティをフォーカスに適用します。

<input class="placeholder-gray-600 focus:placeholder-gray-500 ..." placeholder="jane@example.com">

フォーカスユーティリティは、レスポンシブ{screen}:プレフィックスをfocus:プレフィックスのに追加することで、レスポンシブユーティリティと組み合わせることもできます。

<input class="... md:placeholder-gray-900 md:focus:placeholder-red-600 ...">

カスタマイズ

Placeholder Colors

デフォルトでは、Tailwindはデフォルトカラーパレット全体をプレースホルダーカラーとして使用できるようにします。

tailwind.config.jsファイルのtheme.colorsを編集してカラーパレットをカスタマイズするか、theme.textColorセクションでプレースホルダーの色だけをカスタマイズできます。

  // tailwind.config.js
  module.exports = {
    theme: {
-     placeholderColor: theme => theme('colors'),
+     placeholderColor: {
+       'primary': '#3490dc',
+       'secondary': '#ffed4a',
+       'danger': '#e3342f',
+     }
    }
  }

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

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

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

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

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

無効にする

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

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

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

Tailwind UI is now in early access!