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

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

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

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

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

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

查看默認啟用了哪些變體的列表，查看本頁末尾的 參考表。

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

Hover

添加 ?hover:? 前綴，以在 hover 狀態(tài)時應用一個功能類。

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

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

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

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

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

Focus

添加 ?focus:? 前綴，以在 focus 狀態(tài)時應用一個功能類。

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

默認情況下， 以下核心插件啟用了該 ?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 ?部分控制是否為某個插件啟用 ?focus ?變體：

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

Active

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

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

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

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

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

Group-hover

如果您需要當鼠標懸停在一個指定的父元素上時對其子元素設置樣式，給父元素添加 ?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>

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

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

您可以在 ?tailwind.config.js? 文件中的 ?variants ?部分控制是否為某個插件啟用 ?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>

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

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

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

Focus-within

添加 ?focus-within:? 前綴以僅在該元素或其任何后代具有焦點時應用實用程序。

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

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

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

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

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

Focus-visible

請注意，focus-visible 當前需要 JS 和 PostCSS polyfills 來提供足夠的瀏覽器支持。

添加 ?focus-visible:? 前綴，以便當一個元素具有焦點且僅在用戶使用鍵盤時才應用功能類。

<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?，因此，為了獲得足夠的瀏覽器支持，您應該安裝并配置 focus-visible JS polyfill 和  focus-visible PostCSS polyfill，并確保該插件在 PostCSS 插件列表中位于 Tailwind 之后。

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

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

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

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

Motion-safe

添加 ?motion-safe:? 前綴以便僅在 ?prefers-reduced-motion? 匹配 ?no-preference? 時應用功能類。

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

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

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

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

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

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

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

Motion-reduce

添加 ?motion-reduce:? 前綴以便僅在 ?prefers-reduced-motion? 匹配 ?reduce ?時應用功能類。

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

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

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

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

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

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

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

Disabled

添加 ?disabled:? 前綴，以便當一個元素被禁用時才應用功能類。

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

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

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

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

Visited

添加 ?visited:? 前綴，以便當一個鏈接被訪問后才應用功能類。

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

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

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

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

Checked

添加 ?checked:? 前綴，以便當一個單選或復選框被選中時才應用功能類。

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

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

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

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

First-child

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

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

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

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

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

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

Last-child

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

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

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

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

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

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

Odd-child

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

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

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

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

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

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

Even-child

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

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

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

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

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

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

與響應式前綴結合使用

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

要在指定斷點應用一個狀態(tài)變體，請在狀態(tài)前綴之前添加響應式前綴：

<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 默認不支持的任何狀態(tài)創(chuàng)建自己的變體。

例如，這個簡單的插件增加了對 ?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`
        })
      })
    })
  ]
}

默認變體參考

出于文件大小的考慮，默認情況下，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']
  }
}