Tailwind CSS 漸變色停止

漸變色停止

用于控制背景漸變中的顏色停止的功能類。

開(kāi)始顏色

使用 ?from-{color}? 功能類設(shè)置漸變的起始顏色。

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

結(jié)束顏色

使用 ?to-{color}? 實(shí)用程序設(shè)置漸變的結(jié)束顏色。

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

默認(rèn)情況下，漸變效果不會(huì)從透明中淡入。要從透明漸變，請(qǐng)反轉(zhuǎn)漸變方向，并使用 ?from-{color}? 功能類。

中間色

使用 ?via-{color}? 功能類為漸變添加中間色。

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

如果沒(méi)有出現(xiàn) ?to-{color}?，帶有 ?from-{color}? 和 ?via-{color}? 的梯度將默認(rèn)為淡出為透明。

漸變?yōu)橥该?/h2>

漸變默認(rèn)為透明，不需要你明確添加 ?to-transparent?。Tailwind根據(jù)起始顏色智能地計(jì)算出正確的透明值，以避免Safari中的一個(gè)bug，該bug導(dǎo)致導(dǎo)致僅僅是 ?transparent ?的關(guān)鍵詞褪去了灰色，這看起來(lái)很糟糕。

不要顯式添加`to-transparent`

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

只指定一個(gè)顏色，并自動(dòng)淡化為透明。

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

響應(yīng)式

要控制元素在特定斷點(diǎn)處的漸變色停止，可在任何現(xiàn)有的漸變色停止功能類中添加 ?{screen}:? 前綴。例如，使用 ?md:from-green-500? 來(lái)應(yīng)用 ?from-green-500? 功能類，只在中等大小的屏幕及以上。

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

關(guān)于 Tailwind 的響應(yīng)式設(shè)計(jì)功能的更多信息，請(qǐng)查看響應(yīng)式設(shè)計(jì)文檔。

懸停

要控制元素在懸停時(shí)的漸變色停止，請(qǐng)?jiān)谌魏维F(xiàn)有的漸變色停止功能類中添加 ?hover:? 前綴。例如，使用 ?hover:bg-blue-500? 在懸停時(shí)應(yīng)用 ?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>

通過(guò)在 ?focus:? 前綴之前添加響應(yīng)的 ?{screen}:? 前綴，懸停功能類也可以與響應(yīng)功能類相結(jié)合。

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

聚焦

要在焦點(diǎn)上控制元素的漸變色停頓，可在任何現(xiàn)有的漸變色停頓功能類中添加 ?focus:? 前綴。例如，使用 ?focus:bg-blue-500? 在焦點(diǎn)上應(yīng)用 ?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>

自定義

背景顏色

默認(rèn)情況下， Tailwind 將整個(gè)默認(rèn)調(diào)色板作為漸變色停止。

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

變體

默認(rèn)情況下， 針對(duì) gradient color stops 功能類，只生成 responsive, dark mode (if enabled), hover and focus 變體。

您可以通過(guò)修改您的 ?tailwind.config.js? 文件中的 ?variants ?部分中的 ?gradientColorStops ?屬性來(lái)控制為 gradient color stops 功能生成哪些變體。

例如，這個(gè)配置也將生成 active and group-hover 變體:

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

禁用

如果您不打算在您的項(xiàng)目中使用 gradient color stops 功能，您可以通過(guò)在配置文件的 ?corePlugins ?部分將 ?gradientColorStops ?屬性設(shè)置為 ?false ?來(lái)完全禁用它們：

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