🗽

【Tailwind和訳】CUSTOMIZATION/Variants

2021/10/23に公開約13,900字

この記事について

この記事は、CUSTOMIZATION/Variantsの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

Configuring Variants

プロジェクトで有効にするユーティリティバリアントを構成します。

tailwind.config.js ファイルの variants セクションは、各コアプラグインに対してどのバリアントを有効にするかを制御する場所です。

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

各プロパティは、そのプラグイン用に生成するバリアントの配列を指すコアプラグイン名です。 次のバリアントは、そのままでサポートされています。

Variant Description
responsive smmdlgxlのようなレスポンシブバリアントです。
dark ダークモードを対象とします。
motion-shafe prefers-reduced-motion: no-preference メディアクエリをターゲットにします。
motion-reduce prefers-reduced-motion: reduce メディアクエリをターゲットにします。
first first-child 疑似クラスを対象とします。
last last-childの疑似クラスを対象とします。
odd odd-childの疑似クラスを対象とします。
even even-lastの疑似クラスを対象とします。
visited visitedの疑似クラスを対象とします。
checked checked疑似クラスを対象とします。
group-hover マークされた親が hover 疑似クラスにマッチした場合、その要素を対象とします。
group-focus マークされた親がfocus疑似クラスにマッチする場合に、その要素をターゲットにします。
focus-within focus-within擬似クラスを対象とする。
hover hover疑似クラスを対象とします。
focus focus疑似クラスを対象とします。
focus-visible focus-visible疑似クラスを対象とします。
active active疑似クラスを対象とします。
disabled disabled疑似クラスを対象とします。

variants の仕組みについては、レスポンシブ variantsダークモード variantshover、focus、その他の状態 variants のドキュメントをご覧ください。

追加のバリアントを有効にする| Enabling extra variants

デフォルトに加えてプラグインの追加のバリアントを有効にする場合は、theme セクション内で extend を使用する方法と同様に、extend キーワードを使用してバリアントを構成できます。

tailwind.config.js
module.exports = {
  variants: {
    // デフォルトに加えて、'active' バリアントが生成されます。
    extend: {
      backgroundColor: ['active']
    }
  },
}

バリアントの順序は重要であるため、extend キーの下に追加されたバリアントは、適切なデフォルトのバリアント順序を使用して自動的に順序付けられます。必要に応じて、variantOrder オプションを使用してこの順序をカスタマイズできます。

デフォルトのバリアントをオーバーライドする| Overriding default variants

variants キーの直下に設定されたバリアントは、そのプラグインのデフォルトのバリアントを上書きします。

tailwind.config.js
module.exports = {
  variants: {
    // 'active' バリアントのみが生成されます。
    backgroundColor: ['active'],
  },
}

デフォルトのバリアントをオーバーライドするときは、追加する新しいバリアントだけでなく、有効にするすべてのバリアントを常に指定するようにしてください。

バリアントの順序| Ordering variants

バリアントをオーバーライドする場合、バリアントは指定した順序で生成されるため、リストの最後にあるバリアントがリストの最初にあるバリアントよりも優先されることに注意してください。

たとえば、ここでは、focus バリアントは backgroundColor ユーティリティの優先順位が最も高くなりますが、hover バリアントは borderColor ユーティリティの優先順位が最も高くなります。

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

...入力がホバーされ、同時にフォーカスされた場合、背景は白で、ボーダーは黒になります。

このようにバリアントを順番に生成することで、エンドユーザーとしては最も柔軟性が高くなりますが、鋭利なツールでもあり、注意しないと意図しない結果になることもあります。可能な限りデフォルトを上書きするのではなく、追加のバリアントを有効にし、この機能はあくまでもエスケープハッチとして使用することをお勧めします。

特別なバリアント| Special variants

Responsive

responsive バリアントは Tailwind では特殊なケースであり、バリアント設定でリストアップした順序に影響されません。

これは、responsive バリアントが自動的に他のバリアントとスタックするためで、つまり、ユーティリティーに responsive スポンシブバリアントと hover バリアントの両方を指定した場合、Tailwind はレスポンシブホバーバリアントも生成します。

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

responsive バリアントは、デフォルトではグループ化されてスタイルシートの最後に挿入され、variants リストのどこにレスポンシブがあるかに関わらず、特異性の問題を回避します。

何らかの理由でこの動作をカスタマイズしたい場合は、@tailwind screens ディレクティブを使って、レスポンシブバリアントが挿入される場所を指定することができます。

Dark, motion-safe, and motion-reduce

darkmotion-safemotion-reduce の各バリアントも他のバリアントと重ねられますが、responsive とは異なり、同じ "slot" に重ねられるので、responsive と simple state の各バリアントと組み合わせることはできますが、お互いに組み合わせることはできません。

これらのバリアントの順番はお互いに関係しますが、他のバリアントとの関係はありません。実際のところ、これらのバリアントが互いに衝突するような状況は考えられないので、これは結局問題になりません。

variants の設定にこれらの variant をどのような順番で入れても、その違いに気づくことはありません。

Default

特別な DEFAULT バリアントを使って、ユーティリティーの通常の、接頭辞のないバージョンが、他のバリアントと比較してどこに生成されるかをコントロールすることができます。

これは高度な機能で、ユーティリティの通常バージョンよりも低い優先順位を持つカスタムバリアント(以下の例の children のようなもの)がある場合にのみ、本当に便利です。

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;
}
/* ... */

カスタムバリアントの作成について詳しくは、バリアントプラグインのドキュメントをご覧ください。

カスタムバリアントの使用| Using custom variants

新しいバリアントを追加するプラグインを書いたりインストールしたりした場合、組み込みのバリアントと同じように、バリアントの設定に含めることでそのバリアントを有効にすることができます。

例えば、tailwindcss-interaction-variants プラグインgroup-disabled バリアントを追加します (他にもあります)。

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

カスタムバリアントの作成について詳しくは、バリアントプラグインのドキュメントをご覧ください。

カスタムバリアントの順序

カスタムバリアントのデフォルトのソート位置を指定したい場合は、カスタムバリアントを含むように variantOrder をオーバーライドしてください。

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 をオーバーライドする場合は、リスト全体を指定する必要があります。

デフォルトのバリアントリファレンス| Default variants reference

これは、Tailwind のデフォルトのバリアント設定の完全なリファレンスで、デフォルトを維持しながら新しいバリアントを追加したい場合に役立ちます。

tailwind.config.js
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']
  }
}

Discussion

ログインするとコメントできます