「及時」模式:全新世代的 Tailwind CSS
Tailwind CSS on GitHub

Gradient Color Stops

Utilities for controlling the color stops in background gradients.

Default class reference

Class
Preview 
from-transparent
from-current
from-black
from-white
from-gray-50
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-50
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-yellow-50
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-50
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-blue-50
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-50
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-50
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-50
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-50
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-50
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-yellow-50
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-50
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-blue-50
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-50
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-50
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-50
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-50
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-50
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-yellow-50
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-50
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-blue-50
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-50
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-50
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-50
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

Set the starting color of a gradient using the from-{color} utilities.

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

Ending color

Set the ending color of a gradient using the to-{color} utilities.

<div class="bg-gradient-to-r from-green-400 to-blue-500 ..."></div>

Gradients to do not fade in from transparent by default. To fade in from transparent, reverse the gradient direction and use a from-{color} utility.

Middle color

Add a middle color to a gradient using the via-{color} utilities.

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

Gradients with a from-{color} and via-{color} will fade out to transparent by default if no to-{color} is present.

Fading to transparent

Gradients fade out to transparent by default, without requiring you to add to-transparent explicitly. Tailwind intelligently calculates the right “transparent” value to use based on the starting color to avoid a bug in Safari that causes fading to simply the transparent keyword to fade through gray, which just looks awful.

Don't add `to-transparent` explicitly

<div class="bg-gradient-to-r from-blue-500 to-transparent">
  <!-- ... -->
</div>

Only specify a from color and fade to transparent automatically

<div class="bg-gradient-to-r from-blue-500">
  <!-- ... -->
</div>

Responsive

To control the gradient color stops of an element at a specific breakpoint, add a {screen}: prefix to any existing gradient color stop utility. For example, use md:from-green-500 to apply the from-green-500 utility at only medium screen sizes and above.

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

For more information about Tailwind’s responsive design features, check out the Responsive Design documentation.

Hover

To control the gradient color stops of an element on hover, add the hover: prefix to any existing gradient color stop utility. For example, use hover:bg-blue-500 to apply the bg-blue-500 utility on hover.

<button type="button" class="bg-gradient-to-r from-green-400 to-blue-500 hover:from-pink-500 hover:to-yellow-500 ...">
  Hover me
</button>

Hover utilities can also be combined with responsive utilities by adding the responsive {screen}: prefix before the focus: prefix.

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

Focus

To control the gradient color stops of an element on focus, add the focus: prefix to any existing gradient color stop utility. For example, use focus:bg-blue-500 to apply the bg-blue-500 utility on focus.

<button type="button" class="bg-gradient-to-r from-green-400 to-blue-500 focus:from-pink-500 focus:to-yellow-500">
  Focus me
</button>

Focus utilities can also be combined with responsive utilities by adding the responsive {screen}: prefix before the focus: prefix.

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

Customizing

Background Colors

By default, Tailwind makes the entire default color palette available as gradient color stops.

You can customize your color palette by editing the theme.colors variable in your tailwind.config.js file, or customize just your gradient color stop colors using the theme.gradientColorStops section of your Tailwind config.

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

Variants

默認情況下, 只有 響應式、深色模式 (如果啟用)、hover 和 focus 的 gradient color stops 變化模式 (variants) 會產生。

tailwind.config.jsvariants 區塊中變更 gradientColorStops 屬性來決定有哪些變化模式會生成。

舉個例子來說,這個設定將會生成 響應式 和 active 的變化模式。

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

Disabling

如果你不打算在專案中使用 gradient color stops 功能,可以在你的設定檔裡的 corePlugins 屬性中將 gradientColorStops 設定為 false 來停用功能:

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