Tailwind CSS home page
Tailwind CSS on GitHub

渐变色停止

用于控制背景渐变中的颜色停止的功能类。

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

开始颜色

使用 from-{color} 功能类设置渐变的起始颜色。

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

默认情况下，渐变色为透明色。

结束色

使用 to-{color} 功能类设置渐变的结束颜色。

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

默认情况下，渐变效果不会从透明中淡入。要从透明渐变，请反转渐变方向，并使用 from-{color} 功能类。

中间色

使用 via-{color} 功能类为渐变添加中间色。

<div class="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 的响应式设计功能的更多信息，请查看响应式设计文档。

悬停

要控制元素在悬停时的渐变色停止，请在任何现有的渐变色停止功能类中添加 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 ...">
  Hover me
</button>

Hover utilities can also be combined with responsive utilities by adding the responsive {screen}: prefix before the focus: prefix. 通过在 focus: 前缀之前添加响应的 {screen}: 前缀，悬停功能类也可以与响应功能类相结合。

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

聚焦

要在焦点上控制元素的渐变色停顿，可在任何现有的渐变色停顿功能类中添加 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">
  Focus me
</button>
<button class="... md:from-blue-500 md:focus:from-blue-700 ...">Button</button>

自定义

背景颜色

默认情况下， Tailwind 将整个默认调色板作为渐变色停止。

您可以通过编辑 tailwind.config.js 文件中的 theme.cols 变量来自定义您的调色板，或者使用 Tailwind 配置中的 theme.gradientColorStops 部分来自定义渐变色停止颜色。

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

变体

默认情况下， 针对 gradient color stops 功能类，只生成 responsive, dark mode (if enabled), hover and focus 变体。

您可以通过修改您的 tailwind.config.js 文件中的 variants 部分中的 gradientColorStops 属性来控制为 gradient color stops 功能生成哪些变体。

例如，这个配置也将生成 active and group-hover 变体:

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

禁用

如果您不打算在您的项目中使用 gradient color stops 功能，您可以通过在配置文件的 corePlugins 部分将 gradientColorStops property to false in the corePlugins section of your config file:

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     gradientColorStops: false,
    }
  }
背景图像边框圆角