Tailwind CSS 變體

配置變體

配置您的項(xiàng)目中啟用哪些功能變體。

?tailwind.config.js? 文件中的 ?variants ?部分是您控制每個(gè)核心插件應(yīng)該啟用哪些變體的地方。

// tailwind.config.js
module.exports = {
  variants: {
    extend: {
      backgroundColor: ['active'],
      // ...
      borderColor: ['focus-visible', 'first'],
      // ...
      textColor: ['visited'],
    }
  },
}

每個(gè)屬性都是一個(gè)核心插件名稱，指向一個(gè)要為該插件生成的變體數(shù)組。

以下是支持的開(kāi)箱即用的變體：

啟用額外變體

如果您想在默認(rèn)值之外為插件啟用額外的變體，您可以使用 ?extend ?關(guān)鍵字來(lái)配置您的變體，類(lèi)似于您如何在 ?theme ?部分使用 ?extend?。

// tailwind.config.js
module.exports = {
  variants: {
    // The 'active' variant will be generated in addition to the defaults
    extend: {
      backgroundColor: ['active']
    }
  },
}

因?yàn)?nbsp;變體的順序很重要，在 ?extend? 鍵下添加的任何變體都會(huì)使用合理的默認(rèn)變體順序自動(dòng)為您排序。如果有必要，您可以使用 variantOrder 選項(xiàng)自定義這個(gè)順序。

覆蓋默認(rèn)變體

任何直接在 ?variants ?鍵下配置的變體將覆蓋該插件的默認(rèn)變體。

// tailwind.config.js
module.exports = {
  variants: {
    // Only 'active' variants will be generated
    backgroundColor: ['active'],
  },
}

當(dāng)覆蓋默認(rèn)變體時(shí)，確保您總是指定所有您想啟用的變體，而不僅僅是您想添加的新變體。

為變體排序

需要注意的是，當(dāng)覆蓋變體時(shí)，變體會(huì)按照您指定的順序生成，因此列表末尾的變體將優(yōu)先于列表開(kāi)頭的變體。

例如，在這里，?focus ?變體對(duì) ?backgroundColor ?功能類(lèi)具有最高優(yōu)先級(jí)，但 ?hover ?變體對(duì) ?borderColor ?功能類(lèi)具有最高優(yōu)先級(jí)。

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

/* Generated CSS */

.bg-black { background-color: #000 }
.bg-white { background-color: #fff }
/* ... */

.hover\:bg-black:hover { background-color: #000 }
.hover\:bg-white:hover { background-color: #fff }
/* ... */

.focus\:bg-black:focus { background-color: #000 }
.focus\:bg-white:focus { background-color: #fff }
/* ... */

.border-black { border-color: #000 }
.border-white { border-color: #fff }
/* ... */

.focus\:border-black:focus { border-color: #000 }
.focus\:border-white:focus { border-color: #fff }
/* ... */

.hover\:border-black:hover { border-color: #000 }
.hover\:border-white:hover { border-color: #fff }
/* ... */

這意味著，給定以下HTML：

<input class="focus:bg-white hover:bg-black focus:border-white hover:border-black">

如果輸入框同時(shí)懸停和聚焦，背景將是白色的，但邊框?qū)⑹呛谏摹?/p>

作為終端用戶，這樣按順序生成變體能給您帶來(lái)最大的靈活性，但它也是一個(gè)利器，如果您不小心，可能會(huì)產(chǎn)生意想不到的后果。我們建議 啟用額外的變體，而不是盡可能地覆蓋默認(rèn)值，并且只把這個(gè)功能作為一個(gè)逃生通道。

特殊變體

響應(yīng)式

?responsive ?變體在 Tailwind 中是一個(gè)特殊的情況，并且不會(huì)受到您在變體配置中列出的順序的影響。

這是因?yàn)?nbsp;?responsive ?變體會(huì)自動(dòng)與其他變體堆疊在一起，這意味著如果您為一個(gè)功能指定了 ?responsive ?和 ?hover ?變體，Tailwind 也會(huì)生成 responsive hover 變體。

// tailwind.config.js
module.exports = {
  variants: {
    backgroundColor: ['responsive', 'hover'],
    borderColor: ['responsive', 'focus'],
  },
}

無(wú)論 ?responsive ?出現(xiàn)在您的 ?variants ?列表中的哪個(gè)位置，響應(yīng)式變體都會(huì)被歸為一組，并默認(rèn)插入到您的樣式表的最后，以避免特定性問(wèn)題。

如果您出于任何原因想定制這種行為，您可以使用 @tailwind screens 指令來(lái)指定響應(yīng)的變體應(yīng)該插入的位置。

Dark, motion-safe, and motion-reduce

?dark?、?motion-safe? 和 ?motion-reduce? 變體也會(huì)與其他變體疊加，但與 ?responsive ?不同的是，它們疊加在同一個(gè) “slot” 中，所以您可以將它們與 ?responsive ?和簡(jiǎn)單狀態(tài)變體結(jié)合起來(lái)，但不能相互結(jié)合。

這些變體的順序相對(duì)于他們相互之間來(lái)說(shuō)很重要，但相對(duì)于其他變體來(lái)說(shuō)不重要。幾乎無(wú)法想象到這些變體在實(shí)踐中會(huì)相互沖突的情況，所以無(wú)論如何，這最終都不是問(wèn)題。

您可以在您的 ?variants ?配置中以任何順序包含這些變種，而且永遠(yuǎn)不會(huì)注意到區(qū)別。

默認(rèn)

您可以使用特殊的 ?DEFAULT ?變體來(lái)控制相對(duì)于其他變體而言，一個(gè)功能的普通、無(wú)前綴的版本生成的地方。

這是一個(gè)高級(jí)特性，只有當(dāng)您有一個(gè)自定義的變體（比如下面例子中的 ?children?），它的優(yōu)先級(jí)應(yīng)該比普通版本的功能低時(shí)才會(huì)真正有用。

// tailwind.config.js
module.exports = {
  variants: {
    backgroundColor: ['children', 'DEFAULT', 'hover', 'focus'],
  },
}

/* Generated CSS */

.children\:bg-black > * { background-color: #000; }
.children\:bg-white > * { background-color: #fff; }

.bg-black { background-color: #000 }
.bg-white { background-color: #fff }
/* ... */

.hover\:bg-black:hover { background-color: #000 }
.hover\:bg-white:hover { background-color: #fff }
/* ... */

.focus\:bg-black:focus { background-color: #000 }
.focus\:bg-white:focus { background-color: #fff }
/* ... */

使用自定義變體

如果您編寫(xiě)或安裝了一個(gè) 插件，這個(gè)插件增加了一個(gè)新的變體，您可以通過(guò)在您的變體配置中加入它來(lái)啟用這個(gè)變體，就像它是一個(gè)內(nèi)置變體一樣。

例如，tailwindcss-interaction-variants 插件 增加了一個(gè) ?group-disabled? 變體(其中之一)。

// tailwind.config.js
{
  variants: {
    backgroundColor: ['responsive', 'hover', 'focus', 'group-disabled'],
  },
  plugins: [
    require('tailwindcss-interaction-variants'),
  ],
}

給自定義變體排序

如果您想為一個(gè)自定義變量指定一個(gè)默認(rèn)的排序位置，覆蓋您的 ?variantOrder ?來(lái)包含自定義變體。

// tailwind.config.js
module.exports = {
  // ...
  variantOrder: [
    'first',
    'last',
    'odd',
    'even',
    'visited',
    'checked',
    'group-hover',
    'group-focus',
    'focus-within',
    'hover',
    'focus',
    'focus-visible',
    'active',
    'group-disabled', // Custom variant
    'disabled',
  ],
  variants: {
    extend: {
      backgroundColor: ['group-disabled'],
    }
  }
}

您需要在覆蓋 ?variantOrder ?時(shí)指定整個(gè)列表，以包含任何自定義變體。

默認(rèn)變體參考

這里是一個(gè) Tailwind 的默認(rèn)變體配置的完整參考，當(dāng)您想添加一個(gè)新的變體，同時(shí)保留默認(rèn)值時(shí)，它會(huì)很有用。

// 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']
  }
}