Tailwind CSS 懸停、焦點(diǎn)和其他狀態(tài)

懸停、焦點(diǎn)和其它狀態(tài)

使用功能類為處于懸停、焦點(diǎn)和其它狀態(tài)的元素設(shè)置樣式。

與 Tailwind 如何處理 響應(yīng)式設(shè)計(jì) 類似，通過為功能類添加適當(dāng)?shù)臓顟B(tài)變體前綴，可以對(duì)處于 hover 、focus 和其它狀態(tài)的元素設(shè)置樣式。

<form>
  <input class="border border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent ...">
  <button class="bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-opacity-50 ...">
    Sign up
  </button>
</form>

出于文件大小的考慮，默認(rèn)情況下并非對(duì)所有的功能類都啟用了狀態(tài)變體，但我們盡力啟用了最常用的組合。

查看默認(rèn)啟用了哪些變體的列表，查看本頁(yè)末尾的 參考表。

如果您需要啟用一個(gè) Tailwind 未支持的狀態(tài)，可以通過 編寫變體插件 來擴(kuò)展支持的變體。

Hover

添加 ?hover:? 前綴，以在 hover 狀態(tài)時(shí)應(yīng)用一個(gè)功能類。

<button class="bg-red-500 hover:bg-red-700 ...">
  Hover me
</button>

默認(rèn)情況下， 以下核心插件啟用了該 ?hover ?變體：

• ?backgroundColor ?
• ?backgroundOpacity ?
• ?borderColor ?
• ?borderOpacity ?
• ?boxShadow ?
• ?gradientColorStops ?
• ?opacity ?
• ?rotate ?
• ?scale ?
• ?skew ?
• ?textColor ?
• ?textDecoration ?
• ?textOpacity ?
• ?translate?

您可以在 ?tailwind.config.js? 文件中的 ?variants? 部分控制是否為某個(gè)插件啟用 ?hover ?變體：

// tailwind.config.js
module.exports = {
  // ...
  variants: {
    extend: {
      padding: ['hover'],
    }
  },
}

Focus

添加 ?focus:? 前綴，以在 focus 狀態(tài)時(shí)應(yīng)用一個(gè)功能類。

<input class="focus:ring-2 focus:ring-blue-600 ...">

默認(rèn)情況下， 以下核心插件啟用了該 ?focus ?變體：

• ?accessibility ?
• ?backgroundColor ?
• ?backgroundOpacity ?
• ?borderColor ?
• ?borderOpacity ?
• ?boxShadow ?
• ?gradientColorStops ?
• ?opacity ?
• ?outline ?
• ?placeholderColor ?
• ?placeholderOpacity ?
• ?ringColor ?
• ?ringOffsetColor ?
• ?ringOffsetWidth ?
• ?ringOpacity ?
• ?ringWidth ?
• ?rotate ?
• ?scale ?
• ?skew ?
• ?textColor ?
• ?textDecoration ?
• ?textOpacity ?
• ?translate ?
• ?zIndex?

您可以在 ?tailwind.config.js? 文件中的 ?variants ?部分控制是否為某個(gè)插件啟用 ?focus ?變體：

// tailwind.config.js
module.exports = {
  // ...
  variants: {
    extend: {
      maxHeight: ['focus'],
    }
  },
}

Active

添加 ?active:? 前綴，以在元素處于 active 狀態(tài)時(shí)應(yīng)用某個(gè)功能。

<button class="bg-green-500 active:bg-green-700 ...">
  Click me
</button>

默認(rèn)情況下，所有核心插件都沒有啟用該 ?active ?變體。

您可以在 ?tailwind.config.js? 文件中的 ?variants ?部分控制是否為某個(gè)插件啟用 ?active ?變體：

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

Group-hover

如果您需要當(dāng)鼠標(biāo)懸停在一個(gè)指定的父元素上時(shí)對(duì)其子元素設(shè)置樣式，給父元素添加 ?group ?類，并且為子元素的功能類添加 ?group-hover:? 前綴。

<div class="group border-indigo-500 hover:bg-white hover:shadow-lg hover:border-transparent ...">
  <p class="text-indigo-600 group-hover:text-gray-900 ...">New Project</p>
  <p class="text-indigo-500 group-hover:text-gray-500 ...">Create a new project from a variety of starting templates.</p>
</div>

默認(rèn)情況下， 以下核心插件啟用了該 ?group-hover? 變體：

• ?backgroundColor ?
• ?backgroundOpacity ?
• ?borderColor ?
• ?borderOpacity ?
• ?boxShadow ?
• ?opacity ?
• ?textColor ?
• ?textDecoration ?
• ?textOpacity?

您可以在 ?tailwind.config.js? 文件中的 ?variants ?部分控制是否為某個(gè)插件啟用 ?group-hover? 變體：

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

Group-focus

除了 focus，?group-focus? 變體的工作方式與 ?group-hover? 一樣。

<button class="group bg-yellow-500 focus:bg-yellow-600 ...">
  <svg class="text-white group-focus:text-yellow-300 ..."></svg>
  Bookmark
</button>

默認(rèn)情況下，所有核心插件都沒有啟用該 ?group-focus? 變體。

您可以在 ?tailwind.config.js? 文件中的 ?variants ?部分控制是否為某個(gè)插件啟用 ?group-focus? 變體：

// tailwind.config.js
module.exports = {
  // ...
  variants: {
    extend: {
      backgroundColor: ['group-focus'],
    }
  },
}

Focus-within

添加 ?focus-within:? 前綴以僅在該元素或其任何后代具有焦點(diǎn)時(shí)應(yīng)用實(shí)用程序。

<form>
  <div class="text-gray-400 focus-within:text-gray-600 ...">
    <div class="...">
      <svg fill="currentColor"></svg>
    </div>
    <input class="focus:ring-2 focus:ring-gray-300 ...">
  </div>
</form>

默認(rèn)情況下， 以下核心插件啟用了該 ?focus-within? 變體：

• ?accessibility ?
• ?backgroundColor ?
• ?backgroundOpacity ?
• ?borderColor ?
• ?borderOpacity ?
• ?boxShadow ?
• ?opacity ?
• ?outline ?
• ?ringColor ?
• ?ringOffsetColor ?
• ?ringOffsetWidth ?
• ?ringOpacity ?
• ?ringWidth ?
• ?textColor ?
• ?textDecoration ?
• ?textOpacity ?
• ?zIndex?

您可以在 ?tailwind.config.js? 文件中的 ?variants ?部分控制是否為某個(gè)插件啟用 ?focus-within? 變體：

// tailwind.config.js
module.exports = {
  // ...
  variants: {
    extend: {
      scale: ['focus-within'],
    }
  },
}

Focus-visible

請(qǐng)注意，focus-visible 當(dāng)前需要 JS 和 PostCSS polyfills 來提供足夠的瀏覽器支持。

添加 ?focus-visible:? 前綴，以便當(dāng)一個(gè)元素具有焦點(diǎn)且僅在用戶使用鍵盤時(shí)才應(yīng)用功能類。

<button class="focus:ring-2 focus:ring-red-500 ...">
  Ring on focus
</button>
<button class="focus:outline-none focus-visible:ring-2 focus-visible:ring-rose-500 ...">
  Ring on focus-visible
</button>

注意：目前僅 Chrome, Edge, and Firefox 原生支持 ?focus-visible?，因此，為了獲得足夠的瀏覽器支持，您應(yīng)該安裝并配置 focus-visible JS polyfill 和  focus-visible PostCSS polyfill，并確保該插件在 PostCSS 插件列表中位于 Tailwind 之后。

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    'postcss-focus-visible': {},
    autoprefixer: {}
  }
}

默認(rèn)情況下，所有核心插件都沒有啟用該 ?focus-visible? 變體。

您可以在 ?tailwind.config.js? 文件中的 ?variants ?部分控制是否為某個(gè)插件啟用 ?focus-visible? 變體：

// tailwind.config.js
module.exports = {
  // ...
  variants: {
    extend: {
      textDecoration: ['focus-visible'],
    }
  },
}

Motion-safe

添加 ?motion-safe:? 前綴以便僅在 ?prefers-reduced-motion? 匹配 ?no-preference? 時(shí)應(yīng)用功能類。

例如：如果用戶未在系統(tǒng)中開啟 “Reduce motion”，則此按鈕僅在鼠標(biāo)懸停時(shí)發(fā)生動(dòng)畫效果。

<button class="transform motion-safe:hover:scale-110 ...">
  Hover me
</button>

注意：不像其它大多數(shù)變體，?motion-safe? 在按以下順序排列時(shí)可以與響應(yīng)式變體和其它變體（如 ?hover?）結(jié)合使用。

<div class="sm:motion-safe:hover:animate-spin">
  <!-- ... -->
</div>

默認(rèn)情況下，所有核心插件都沒有啟用該 ?motion-safe? 變體。

您可以在 ?tailwind.config.js? 文件中的 ?variants ?部分控制是否為某個(gè)插件啟用 ?motion-safe? 變體：

// tailwind.config.js
module.exports = {
  // ...
  variants: {
    extend: {
      animation: ['motion-safe'],
    }
  },
}

Motion-reduce

添加 ?motion-reduce:? 前綴以便僅在 ?prefers-reduced-motion? 匹配 ?reduce ?時(shí)應(yīng)用功能類。

例如，默認(rèn)情況下，此按鈕將在鼠標(biāo)懸停時(shí)產(chǎn)生動(dòng)畫，但是如果用戶在系統(tǒng)中開啟了 “Reduce motion”，則動(dòng)畫將被禁用。

<button class="transform hover:scale-110 motion-reduce:transform-none ...">
  Hover me
</button>

注意：不像其它大多數(shù)變體，?motion-reduce? 在按以下順序排列時(shí)可以與響應(yīng)式變體和其它變體（如 ?hover?）結(jié)合使用。

<div class="sm:motion-reduce:hover:animate-none">
  <!-- ... -->
</div>

默認(rèn)情況下，所有核心插件都沒有啟用該 ?motion-reduce? 變體。

您可以在 ?tailwind.config.js? 文件中的 ?variants ?部分控制是否為某個(gè)插件啟用 ?motion-reduce? 變體：

// tailwind.config.js
module.exports = {
  // ...
  variants: {
    extend: {
      animation: ['motion-reduce'],
    }
  },
}

Disabled

添加 ?disabled:? 前綴，以便當(dāng)一個(gè)元素被禁用時(shí)才應(yīng)用功能類。

<button class="disabled:opacity-50 ...">
  Submit
</button>
<button class="disabled:opacity-50 ..." disabled>
  Submit
</button>

默認(rèn)情況下，所有核心插件都沒有啟用該 ?disabled ?變體。

您可以在 ?tailwind.config.js? 文件中的 ?variants ?部分控制是否為某個(gè)插件啟用 ?disabled ?變體：

// tailwind.config.js
module.exports = {
  // ...
  variants: {
    extend: {
      opacity: ['disabled'],
    }
  },
}

Visited

添加 ?visited:? 前綴，以便當(dāng)一個(gè)鏈接被訪問后才應(yīng)用功能類。

<a href="#" class="text-blue-600 visited:text-purple-600 ...">Link</a>

默認(rèn)情況下，所有核心插件都沒有啟用該 ?visited ?變體。

您可以在 ?tailwind.config.js? 文件中的 ?variants ?部分控制是否為某個(gè)插件啟用 ?visited ?變體：

// tailwind.config.js
module.exports = {
  // ...
  variants: {
    extend: {
      textColor: ['visited'],
    }
  },
}

Checked

添加 ?checked:? 前綴，以便當(dāng)一個(gè)單選或復(fù)選框被選中時(shí)才應(yīng)用功能類。

<input type="checkbox" class="appearance-none checked:bg-blue-600 checked:border-transparent ...">

默認(rèn)情況下，所有核心插件都沒有啟用該 ?checked ?變體。

您可以在 ?tailwind.config.js? 文件中的 ?variants ?部分控制是否為某個(gè)插件啟用 ?checked ?變體：

// tailwind.config.js
module.exports = {
  // ...
  variants: {
    extend: {
      backgroundColor: ['checked'],
      borderColor: ['checked'],
    }
  },
}

First-child

添加 ?first:? 前綴，以僅當(dāng)元素是父元素的第一個(gè)子元素時(shí)才應(yīng)用功能類。當(dāng)使用某種循環(huán)生成元素時(shí)，最為有用。

<div class="...">
  <div v-for="item in items" class="transform first:rotate-45 ...">
    {{ item }}
  </div>
</div>

需要特別注意的是，您應(yīng)該將 ?first:? 功能類添加到子元素上，而不是父元素。

默認(rèn)情況下，所有核心插件都沒有啟用該 ?first-child? 變體。

您可以在 ?tailwind.config.js? 文件中的 ?variants ?部分控制是否為某個(gè)插件啟用 ?first ?變體：

// tailwind.config.js
module.exports = {
  // ...
  variants: {
    extend: {
      borderWidth: ['first'],
    }
  },
}

Last-child

添加 ?last:? 前綴，在僅當(dāng)元素是父元素的最后一個(gè)子元素時(shí)才應(yīng)用功能類。當(dāng)使用某種循環(huán)生成元素時(shí)，最為有用。

<div class="...">
  <div v-for="item in items" class="transform last:rotate-45 ...">
    {{ item }}
  </div>
</div>

需要特別注意的是，您應(yīng)該將 ?last:? 功能類添加到子元素上，而不是父元素。

默認(rèn)情況下，所有核心插件都沒有啟用該 ?last-child? 變體。

您可以在 ?tailwind.config.js? 文件中的 ?variants ?部分控制是否為某個(gè)插件啟用 ?last ?變體：

// tailwind.config.js
module.exports = {
  // ...
  variants: {
    extend: {
      borderWidth: ['last'],
    }
  },
}

Odd-child

添加 ?odd:? 前綴使得僅在元素是父級(jí)奇數(shù)子元素的時(shí)候才應(yīng)用功能類。當(dāng)使用某種循環(huán)生成元素時(shí)，最為有用。

<div class="...">
  <div v-for="item in items" class="transform odd:rotate-45 ...">
    {{ item }}
  </div>
</div>

需要特別注意的是，您應(yīng)該將 ?odd:? 功能類添加到子元素上，而不是父元素。

默認(rèn)情況下，所有核心插件都沒有啟用該 ?odd-child? 變體。

您可以在 ?tailwind.config.js? 文件中的 ?variants ?部分控制是否為某個(gè)插件啟用 ?odd ?變體：

// tailwind.config.js
module.exports = {
  // ...
  variants: {
    extend: {
      backgroundColor: ['odd'],
    }
  },
}

Even-child

添加 ?even:? 前綴使得僅在元素是父級(jí)偶數(shù)子元素的時(shí)候才應(yīng)用功能類。當(dāng)使用某種循環(huán)生成元素時(shí)，最為有用。

<div class="...">
  <div v-for="item in items" class="transform even:rotate-45 ...">
    {{ item }}
  </div>
</div>

需要特別注意的是，您應(yīng)該將 ?even:? 功能類添加到子元素上，而不是父元素。

默認(rèn)情況下，所有核心插件都沒有啟用該 ?even-child? 變體。

您可以在 ?tailwind.config.js? 文件中的 ?variants ?部分控制是否為某個(gè)插件啟用 ?even ?變體：

// tailwind.config.js
module.exports = {
  // ...
  variants: {
    extend: {
      backgroundColor: ['even'],
    }
  },
}

與響應(yīng)式前綴結(jié)合使用

狀態(tài)變體也是響應(yīng)式的，意味著您可以執(zhí)行諸如在不同斷點(diǎn)處更改元素的懸停樣式的操作。

要在指定斷點(diǎn)應(yīng)用一個(gè)狀態(tài)變體，請(qǐng)?jiān)跔顟B(tài)前綴之前添加響應(yīng)式前綴：

<button class="... hover:bg-green-500 sm:hover:bg-blue-500">
  <!-- ... -->
</button>

為自定義功能類生成變體

您可以通過使用 ?@variants? 指令包裹住您自己的自定義 CSS 類來為他們生成狀態(tài)變體：

/* Input: */
@variants group-hover, hover, focus {
  .banana {
    color: yellow;
  }
}

/* Output: */
.banana {
  color: yellow;
}
.group:hover .group-hover\:banana {
  color: yellow;
}
.hover\:banana:hover {
  color: yellow;
}
.focus\:banana:focus {
  color: yellow;
}

創(chuàng)建自定義變體

您可以通過編寫自定義變體插件為 Tailwind 默認(rèn)不支持的任何狀態(tài)創(chuàng)建自己的變體。

例如，這個(gè)簡(jiǎn)單的插件增加了對(duì) ?required ?偽類變體的支持：

// tailwind.config.js
const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ addVariant, e }) {
      addVariant('required', ({ modifySelectors, separator }) => {
        modifySelectors(({ className }) => {
          return `.${e(`required${separator}${className}`)}:required`
        })
      })
    })
  ]
}

默認(rèn)變體參考

出于文件大小的考慮，默認(rèn)情況下，Tailwind 沒有包含所有功能類的所有變體。

// Default configuration
module.exports = {
  // ...
  variants: {
    accessibility: ['responsive', 'focus-within', 'focus'],
    alignContent: ['responsive'],
    alignItems: ['responsive'],
    alignSelf: ['responsive'],
    animation: ['responsive'],
    appearance: ['responsive'],
    backdropBlur: ['responsive'],
    backdropBrightness: ['responsive'],
    backdropContrast: ['responsive'],
    backdropFilter: ['responsive'],
    backdropGrayscale: ['responsive'],
    backdropHueRotate: ['responsive'],
    backdropInvert: ['responsive'],
    backdropOpacity: ['responsive'],
    backdropSaturate: ['responsive'],
    backdropSepia: ['responsive'],
    backgroundAttachment: ['responsive'],
    backgroundBlendMode: ['responsive'],
    backgroundClip: ['responsive'],
    backgroundColor: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],
    backgroundImage: ['responsive'],
    backgroundOpacity: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],
    backgroundPosition: ['responsive'],
    backgroundRepeat: ['responsive'],
    backgroundSize: ['responsive'],
    backgroundOrigin: ['responsive'],
    blur: ['responsive'],
    borderCollapse: ['responsive'],
    borderColor: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],
    borderOpacity: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],
    borderRadius: ['responsive'],
    borderStyle: ['responsive'],
    borderWidth: ['responsive'],
    boxDecorationBreak: ['responsive'],
    boxShadow: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'],
    boxSizing: ['responsive'],
    brightness: ['responsive'],
    clear: ['responsive'],
    container: ['responsive'],
    contrast: ['responsive'],
    cursor: ['responsive'],
    display: ['responsive'],
    divideColor: ['responsive', 'dark'],
    divideOpacity: ['responsive', 'dark'],
    divideStyle: ['responsive'],
    divideWidth: ['responsive'],
    dropShadow: ['responsive'],
    fill: ['responsive'],
    filter: ['responsive'],
    flex: ['responsive'],
    flexDirection: ['responsive'],
    flexGrow: ['responsive'],
    flexShrink: ['responsive'],
    flexWrap: ['responsive'],
    float: ['responsive'],
    fontFamily: ['responsive'],
    fontSize: ['responsive'],
    fontSmoothing: ['responsive'],
    fontStyle: ['responsive'],
    fontVariantNumeric: ['responsive'],
    fontWeight: ['responsive'],
    gap: ['responsive'],
    gradientColorStops: ['responsive', 'dark', 'hover', 'focus'],
    grayscale: ['responsive'],
    gridAutoColumns: ['responsive'],
    gridAutoFlow: ['responsive'],
    gridAutoRows: ['responsive'],
    gridColumn: ['responsive'],
    gridColumnEnd: ['responsive'],
    gridColumnStart: ['responsive'],
    gridRow: ['responsive'],
    gridRowEnd: ['responsive'],
    gridRowStart: ['responsive'],
    gridTemplateColumns: ['responsive'],
    gridTemplateRows: ['responsive'],
    height: ['responsive'],
    hueRotate: ['responsive'],
    inset: ['responsive'],
    invert: ['responsive'],
    isolation: ['responsive'],
    justifyContent: ['responsive'],
    justifyItems: ['responsive'],
    justifySelf: ['responsive'],
    letterSpacing: ['responsive'],
    lineHeight: ['responsive'],
    listStylePosition: ['responsive'],
    listStyleType: ['responsive'],
    margin: ['responsive'],
    maxHeight: ['responsive'],
    maxWidth: ['responsive'],
    minHeight: ['responsive'],
    minWidth: ['responsive'],
    mixBlendMode: ['responsive'],
    objectFit: ['responsive'],
    objectPosition: ['responsive'],
    opacity: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'],
    order: ['responsive'],
    outline: ['responsive', 'focus-within', 'focus'],
    overflow: ['responsive'],
    overscrollBehavior: ['responsive'],
    padding: ['responsive'],
    placeContent: ['responsive'],
    placeItems: ['responsive'],
    placeSelf: ['responsive'],
    placeholderColor: ['responsive', 'dark', 'focus'],
    placeholderOpacity: ['responsive', 'dark', 'focus'],
    pointerEvents: ['responsive'],
    position: ['responsive'],
    resize: ['responsive'],
    ringColor: ['responsive', 'dark', 'focus-within', 'focus'],
    ringOffsetColor: ['responsive', 'dark', 'focus-within', 'focus'],
    ringOffsetWidth: ['responsive', 'focus-within', 'focus'],
    ringOpacity: ['responsive', 'dark', 'focus-within', 'focus'],
    ringWidth: ['responsive', 'focus-within', 'focus'],
    rotate: ['responsive', 'hover', 'focus'],
    saturate: ['responsive'],
    scale: ['responsive', 'hover', 'focus'],
    sepia: ['responsive'],
    skew: ['responsive', 'hover', 'focus'],
    space: ['responsive'],
    stroke: ['responsive'],
    strokeWidth: ['responsive'],
    tableLayout: ['responsive'],
    textAlign: ['responsive'],
    textColor: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],
    textDecoration: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'],
    textOpacity: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],
    textOverflow: ['responsive'],
    textTransform: ['responsive'],
    transform: ['responsive'],
    transformOrigin: ['responsive'],
    transitionDelay: ['responsive'],
    transitionDuration: ['responsive'],
    transitionProperty: ['responsive'],
    transitionTimingFunction: ['responsive'],
    translate: ['responsive', 'hover', 'focus'],
    userSelect: ['responsive'],
    verticalAlign: ['responsive'],
    visibility: ['responsive'],
    whitespace: ['responsive'],
    width: ['responsive'],
    wordBreak: ['responsive'],
    zIndex: ['responsive', 'focus-within', 'focus']
  }
}