バリアントコンフィギュレーション

プロジェクトで有効にするユーティリティバリアントの環境設定をします


Overview

tailwind.config.jsファイルのvariantsセクションは、どのコアユーティリティプラグインに responsive variantspseudo-class variants を生成するかを制御する場所です。

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

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

  • 'responsive'
  • 'group-hover'
  • 'focus-within'
  • 'first'
  • 'last'
  • 'odd'
  • 'even'
  • 'hover'
  • 'focus'
  • 'active'
  • 'visited'
  • 'disabled'
  • 'motion-safe'
  • 'motion-reduce'

Overriding default variants

指定したバリアントは、そのプラグインのデフォルトのバリアントを上書きします。

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

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

Extending default variants

デフォルトに加えてプラグインの追加のバリアントを有効にしたい場合は、配列の代わりに関数を使用してバリアントを構成できます。

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

バリアントの並び順は重要なので、 新しいバリアントを適切な場所に簡単に追加できるようにする引数として、いくつかのヘルパー関数を提供します。

before

beforeヘルパーを使用すると、プラグインのデフォルトのバリアントリストの先頭に新しいバリアントを追加できます。

// tailwind.config.js
module.exports = {
  variants: {
    // Defaults are ['responsive', 'hover', 'focus']
    backgroundColor: ({ before }) => before(['active']),
    // Output: ['active', 'responsive', 'hover', 'focus']
  },
}

リストの特定のバリアントの前に新しいバリアントを追加する場合は、それを2番目の引数として渡します。

// tailwind.config.js
module.exports = {
  variants: {
    // Defaults are ['responsive', 'hover', 'focus']
    backgroundColor: ({ before }) => before(['active'], 'focus'),
    // Output: ['responsive', 'hover', 'active', 'focus']
  },
}

after

afterヘルパーを使用すると、プラグインのデフォルトのバリアントリストの最後に新しいバリアントを追加できます。

// tailwind.config.js
module.exports = {
  variants: {
    // Defaults are ['responsive', 'hover', 'focus']
    backgroundColor: ({ after }) => after(['active']),
    // Output: [responsive', 'hover', 'focus', 'active']
  },
}

リストの特定のバリアントの後に新しいバリアントを追加する場合は、それを2番目の引数として渡します。

// tailwind.config.js
module.exports = {
  variants: {
    // Defaults are ['responsive', 'hover', 'focus']
    backgroundColor: ({ after }) => after(['active'], 'hover'),
    // Output: ['responsive', 'hover', 'active', 'focus']
  },
}

without

withoutヘルパーを使用すると、デフォルトで有効になっているバリアントを無効にできます。

// tailwind.config.js
module.exports = {
  variants: {
    // Defaults are ['responsive', 'hover', 'focus']
    backgroundColor: ({ without }) => without(['focus']),
    // Output: [responsive', 'hover']
  },
}

variants

variantsヘルパーを使用すると、特定のプラグインのバリアントを取得して直接読み取ることができます。

// tailwind.config.js
module.exports = {
  variants: {
    // Defaults are ['responsive', 'hover', 'focus']
    backgroundColor: ({ variants }) => [...variants('backgroundColor'), 'active'],
    // Output: [responsive', 'hover', 'focus', 'active']
  },
}

これはエスケープハッチであり、おそらく必要になることはありません。 before after、および withoutを使ってください — 実際に必要なすべてを処理します。

Composing multiple helpers

各ヘルパーは、オプションでバリアントのリストを最後の引数として取ることができ、 提供されている場合は、現在のプラグインのデフォルトのバリアントリストではなく、そのリストに適用されます。

これにより、それらを一緒に構成して、前後の両方でバリアントを追加したり、別のバリアントを削除しながら別のバリアントの前にバリアントを追加したりすることができます。

// tailwind.config.js
module.exports = {
  variants: {
    // Defaults are ['responsive', 'hover', 'focus']
    backgroundColor: ({ before, after, without }) => without(['focus'], before(['active'], 'hover', after(['focus-within'], 'responsive'))),
    // Output: [responsive', 'focus-within', 'active', 'hover']
  },
}

これは複雑に見え、おそらくこれを頻繁に行う必要はありませんが、必要であれば行うことができます。


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

...もしインプットがホバーでありかつ同時にフォーカスの場合、背景は白になりますが、境界線は黒になります。

一般に、組み込みバリアントには次の順序をお勧めしますが、自分のプロジェクトに最も適した順序を自由に使用できます。

['responsive', 'group-hover', 'group-focus', 'focus-within', 'first', 'last', 'odd', 'even', 'hover', 'focus', 'active', 'visited', 'disabled']

The responsive variant

responsiveバリアントは、バリアント構成にリストする順序の影響を受けない唯一のバリアントです。

これは、responsiveバリアントが疑似クラスバリアントを自動的に積み重ねるためです。 つまり、ユーティリティにresponsiveバリアントとhoverバリアントの両方を指定すると、Tailwindはresponsive hoverバリアントも生成します。

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

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

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


@media (min-width: 640px) {
  .sm\:bg-black { background-color: #000 }
  /* ... */
  .sm\:hover\:bg-black:hover { background-color: #000 }
  /* ... */

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

@media (min-width: 768px) {
  .md\:bg-black { background-color: #000 }
  /* ... */
  .md\:hover\:bg-black:hover { background-color: #000 }
  /* ... */

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

@media (min-width: 1024px) {
  .lg\:bg-black { background-color: #000 }
  /* ... */
  .lg\:hover\:bg-black:hover { background-color: #000 }
  /* ... */

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

@media (min-width: 1280px) {
  .xl\:bg-black { background-color: #000 }
  /* ... */
  .xl\:hover\:bg-black:hover { background-color: #000 }
  /* ... */

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

特異性の問題を回避するために、レスポンシブバリアントはデフォルトでグループ化され、スタイルシートの最後に挿入されます。 何らかの理由でこの動作をカスタマイズしたい場合は、@tailwind screensディレクティブを使用して、レスポンシブバリアントを挿入する場所を指定できます。

The default variant

特別なdefaultバリアントを使用して、通常の接頭辞のないバージョンのユーティリティを、他のバリアントに関して生成する場所を制御できます。

// tailwind.config.js
module.exports = {
  variants: {
    backgroundColor: ['hover', 'default', 'focus'],
  },
}
/* Generated CSS */

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

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

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

これは高度な機能であり、ユーティリティの通常のバージョンよりも優先度を低くする必要があるカスタムバリアント(以下の例の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 }
/* ... */

より詳しいカスタムバリアントの作成についてはvariant plugin documentationをご覧ください。


Enabling variants globally

すべてのユーティリティに適用する必要があるバリアントのグローバルセットを指定するには、バリアントを個別に構成する代わりに、 バリアントの配列をvariantsプロパティに直接割り当てることができます。

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

すべてのプラグインに対して多くのバリアントを有効にすると、ファイルサイズがはるかに大きくなることに注意してください。 これを行う前に、Controlling File Sizeに関するガイドを必ずお読みください。


Using custom variants

新しいバリアントを追加するplugin を作成またはインストールした場合は、 組み込みのバリアントであるかのようにバリアント構成に含めることで、そのバリアントを有効にできます。

たとえば、tailwindcss-interaction-variants plugin は、 とりわけgroup-disabledバリアントを追加します。

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

より詳しいカスタムバリアントの作成についてはvariant plugin documentationをご覧ください。


Default variants reference

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

// Default configuration
module.exports = {
  // ...
  variants: {
    accessibility: ['responsive', 'focus'],
    alignContent: ['responsive'],
    alignItems: ['responsive'],
    alignSelf: ['responsive'],
    appearance: ['responsive'],
    backgroundAttachment: ['responsive'],
    backgroundClip: ['responsive'],
    backgroundColor: ['responsive', 'hover', 'focus'],
    backgroundImage: ['responsive'],
    gradientColorStops: ['responsive', 'hover', 'focus'],
    backgroundOpacity: ['responsive', 'hover', 'focus'],
    backgroundPosition: ['responsive'],
    backgroundRepeat: ['responsive'],
    backgroundSize: ['responsive'],
    borderCollapse: ['responsive'],
    borderColor: ['responsive', 'hover', 'focus'],
    borderOpacity: ['responsive', 'hover', 'focus'],
    borderRadius: ['responsive'],
    borderStyle: ['responsive'],
    borderWidth: ['responsive'],
    boxShadow: ['responsive', 'hover', 'focus'],
    boxSizing: ['responsive'],
    container: ['responsive'],
    cursor: ['responsive'],
    display: ['responsive'],
    divideColor: ['responsive'],
    divideOpacity: ['responsive'],
    divideStyle: ['responsive'],
    divideWidth: ['responsive'],
    fill: ['responsive'],
    flex: ['responsive'],
    flexDirection: ['responsive'],
    flexGrow: ['responsive'],
    flexShrink: ['responsive'],
    flexWrap: ['responsive'],
    float: ['responsive'],
    clear: ['responsive'],
    fontFamily: ['responsive'],
    fontSize: ['responsive'],
    fontSmoothing: ['responsive'],
    fontVariantNumeric: ['responsive'],
    fontStyle: ['responsive'],
    fontWeight: ['responsive', 'hover', 'focus'],
    height: ['responsive'],
    inset: ['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'],
    objectFit: ['responsive'],
    objectPosition: ['responsive'],
    opacity: ['responsive', 'hover', 'focus'],
    order: ['responsive'],
    outline: ['responsive', 'focus'],
    overflow: ['responsive'],
    overscrollBehavior: ['responsive'],
    padding: ['responsive'],
    placeContent: ['responsive'],
    placeItems: ['responsive'],
    placeSelf: ['responsive'],
    placeholderColor: ['responsive', 'focus'],
    placeholderOpacity: ['responsive', 'focus'],
    pointerEvents: ['responsive'],
    position: ['responsive'],
    resize: ['responsive'],
    space: ['responsive'],
    stroke: ['responsive'],
    strokeWidth: ['responsive'],
    tableLayout: ['responsive'],
    textAlign: ['responsive'],
    textColor: ['responsive', 'hover', 'focus'],
    textOpacity: ['responsive', 'hover', 'focus'],
    textDecoration: ['responsive', 'hover', 'focus'],
    textTransform: ['responsive'],
    userSelect: ['responsive'],
    verticalAlign: ['responsive'],
    visibility: ['responsive'],
    whitespace: ['responsive'],
    width: ['responsive'],
    wordBreak: ['responsive'],
    zIndex: ['responsive'],
    gap: ['responsive'],
    gridAutoFlow: ['responsive'],
    gridTemplateColumns: ['responsive'],
    gridAutoColumns: ['responsive'],
    gridColumn: ['responsive'],
    gridColumnStart: ['responsive'],
    gridColumnEnd: ['responsive'],
    gridTemplateRows: ['responsive'],
    gridAutoRows: ['responsive'],
    gridRow: ['responsive'],
    gridRowStart: ['responsive'],
    gridRowEnd: ['responsive'],
    transform: ['responsive'],
    transformOrigin: ['responsive'],
    scale: ['responsive', 'hover', 'focus'],
    rotate: ['responsive', 'hover', 'focus'],
    translate: ['responsive', 'hover', 'focus'],
    skew: ['responsive', 'hover', 'focus'],
    transitionProperty: ['responsive'],
    transitionTimingFunction: ['responsive'],
    transitionDuration: ['responsive'],
    transitionDelay: ['responsive'],
    animation: ['responsive']
  }
}

Translated by T.Arai @ Entap,Inc. / スマホアプリ開発会社

Tailwind UI is now in early access!