グラデーションカラーストップ

背景のグラデーションでカラーストップを制御するためのユーティリティ。

Class reference

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

Starting color

from-{color}ユーティリティを使用してグラデーションの開始色を設定します。

<div class="h-24 bg-gradient-to-r from-red-500"></div>

デフォルトでは、グラデーションは透明にフェードアウトします。

Ending color

to-{color}ユーティリティを使用してグラデーションの終了色を設定します。

<div class="h-24 bg-gradient-to-r from-teal-400 to-blue-500"></div>

デフォルトでは、グラデーションは透明からフェードインしません。 透明からフェードインするには、グラデーションの方向を逆にしてfrom-{color}ユーティリティを使用します。

Middle color

via-{color}ユーティリティを使用して、グラデーションに中間色を追加します。

<div class="h-24 bg-gradient-to-r from-purple-400 via-pink-500 to-red-500"></div>

to-{color}が存在しない場合from-{color}via-{color}のグラデーションはデフォルトで透明にフェードアウトします。

レスポンシブ

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

<div class="bg-gradient-to-r from-purple-400 md:from-orange-500"></div>

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

Hover

ホバー時の要素のグラデーションカラーストップを制御するには、既存のグラデーションカラーストップユーティリティにhover:プレフィックスを追加します。 たとえば、hover:bg-blue-500を使用して、ホバーにbg-blue-500ユーティリティを適用します。

<button type="button" class="bg-gradient-to-r from-teal-400 to-blue-500 hover:from-pink-500 hover:to-orange-500 text-white font-semibold px-4 py-2 rounded">
  Hover me
</button>

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

<button class="... md:from-blue-500 md:hover:from-blue-700 ...">Button</button>

Focus

フォーカスされている要素のグラデーションカラーストップを制御するには、既存のグラデーションカラーストップユーティリティにfocus:プレフィックスを追加します。 たとえば、focus:bg-blue-500を使用して、bg-blue-500ユーティリティをフォーカスに適用します。

<button type="button" class="bg-gradient-to-r from-teal-400 to-blue-500 focus:from-pink-500 focus:to-orange-500 text-white font-semibold px-4 py-2 rounded">
  Focus me
</button>

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

<button class="... md:from-blue-500 md:focus:from-blue-700 ...">Button</button>

カスタマイズ

Background Colors

デフォルトでは、Tailwindは、グラデーションカラーが停止するときにdefault color palette全体を使用可能にします。

tailwind.config.jsファイルのtheme.colors変数を編集して(/docs/colors#customizing)するか Tailwindコンフィグのtheme.gradientColorStopsセクションを使用してグラデーションカラーストップカラーのみをカスタマイズできます。

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

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

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

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

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

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

無効にする

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

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

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

Tailwind UI is now in early access!