テキストの色

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

Class reference

Class
Preview 
.text-transparentAa
.text-currentAa
.text-blackAa
.text-whiteAa
.text-gray-100Aa
.text-gray-200Aa
.text-gray-300Aa
.text-gray-400Aa
.text-gray-500Aa
.text-gray-600Aa
.text-gray-700Aa
.text-gray-800Aa
.text-gray-900Aa
.text-red-100Aa
.text-red-200Aa
.text-red-300Aa
.text-red-400Aa
.text-red-500Aa
.text-red-600Aa
.text-red-700Aa
.text-red-800Aa
.text-red-900Aa
.text-orange-100Aa
.text-orange-200Aa
.text-orange-300Aa
.text-orange-400Aa
.text-orange-500Aa
.text-orange-600Aa
.text-orange-700Aa
.text-orange-800Aa
.text-orange-900Aa
.text-yellow-100Aa
.text-yellow-200Aa
.text-yellow-300Aa
.text-yellow-400Aa
.text-yellow-500Aa
.text-yellow-600Aa
.text-yellow-700Aa
.text-yellow-800Aa
.text-yellow-900Aa
.text-green-100Aa
.text-green-200Aa
.text-green-300Aa
.text-green-400Aa
.text-green-500Aa
.text-green-600Aa
.text-green-700Aa
.text-green-800Aa
.text-green-900Aa
.text-teal-100Aa
.text-teal-200Aa
.text-teal-300Aa
.text-teal-400Aa
.text-teal-500Aa
.text-teal-600Aa
.text-teal-700Aa
.text-teal-800Aa
.text-teal-900Aa
.text-blue-100Aa
.text-blue-200Aa
.text-blue-300Aa
.text-blue-400Aa
.text-blue-500Aa
.text-blue-600Aa
.text-blue-700Aa
.text-blue-800Aa
.text-blue-900Aa
.text-indigo-100Aa
.text-indigo-200Aa
.text-indigo-300Aa
.text-indigo-400Aa
.text-indigo-500Aa
.text-indigo-600Aa
.text-indigo-700Aa
.text-indigo-800Aa
.text-indigo-900Aa
.text-purple-100Aa
.text-purple-200Aa
.text-purple-300Aa
.text-purple-400Aa
.text-purple-500Aa
.text-purple-600Aa
.text-purple-700Aa
.text-purple-800Aa
.text-purple-900Aa
.text-pink-100Aa
.text-pink-200Aa
.text-pink-300Aa
.text-pink-400Aa
.text-pink-500Aa
.text-pink-600Aa
.text-pink-700Aa
.text-pink-800Aa
.text-pink-900Aa

使用方法

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

The quick brown fox jumped over the lazy dog.
<input class="text-purple-600 ...">

不透明度の変更v1.4.0+

.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>

詳細についてはtext opacity documentationをご覧ください。

Responsive

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

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

<div class="text-blue-600 sm:text-green-600 md:text-indigo-600 lg:text-red-600 xl:text-gray-900 ...">
  The quick brown fox...
</div>
The quick brown fox jumped over the lazy dog.

Hover

ホバー時に要素のテキストの色を制御するには、既存のテキストの色ユーティリティにhover:プレフィックスを追加します。 たとえば、hover:text-blue-600を使用して、ホバーにtext-blue-600ユーティリティを適用します。

<button class="text-blue-600 hover:text-red-600 ...">
  Button
</button>

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

<button class="... md:text-blue-500 md:hover:text-blue-600 ...">Button</button>

Focus

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

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

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

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

Customizing

Text Colors

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

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

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

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

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

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

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

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

無効にする

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

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

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

Tailwind UI is now in early access!