Tailwind CSS 渐变色停止

渐变色停止

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

开始颜色

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

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

结束颜色

使用 ​to-{color}​ 实用程序设置渐变的结束颜色。

<div class="bg-gradient-to-r from-green-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}​ 的梯度将默认为淡出为透明。

渐变为透明

渐变默认为透明，不需要你明确添加 ​to-transparent​。Tailwind根据起始颜色智能地计算出正确的透明值，以避免Safari中的一个bug，该bug导致导致仅仅是 ​transparent ​的关键词褪去了灰色，这看起来很糟糕。

不要显式添加`to-transparent`

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

只指定一个颜色，并自动淡化为透明。

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

响应式

要控制元素在特定断点处的渐变色停止，可在任何现有的渐变色停止功能类中添加 ​{screen}:​ 前缀。例如，使用 ​md:from-green-500​ 来应用 ​from-green-500​ 功能类，只在中等大小的屏幕及以上。

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

关于 Tailwind 的响应式设计功能的更多信息，请查看响应式设计文档。

悬停

要控制元素在悬停时的渐变色停止，请在任何现有的渐变色停止功能类中添加 ​hover:​ 前缀。例如，使用 ​hover:bg-blue-500​ 在悬停时应用 ​bg-blue-500​ 功能类。

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

通过在 ​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-green-400 to-blue-500 focus:from-pink-500 focus:to-yellow-500">
  Focus me
</button>

自定义

背景颜色

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

  // 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 ​属性设置为 ​false ​来完全禁用它们：

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