疑似クラスバリアント

ユーティリティを使用して、ホバー、フォーカスなどの要素のスタイルを設定します。


Overview

Tailwindがレスポンシブデザインを処理する方法と同様に、ホバー、フォーカスなどのスタイル要素は、ユーティリティに適切な疑似クラスをプレフィックスとして付けることで実現できます。

<form>
  <input class="bg-gray-200 hover:bg-white hover:border-gray-300 focus:outline-none focus:bg-white focus:shadow-outline focus:border-gray-300 ...">
  <button class="bg-teal-500 hover:bg-teal-600 focus:outline-none focus:shadow-outline ...">
    Sign Up
  </button>
</form>

ファイルサイズを考慮して、すべてのユーティリティですべての疑似クラスバリアントがデフォルトで有効になっているわけではありませんが、最も一般的に使用される組み合わせをそのまま有効にするように最善を尽くしました。

デフォルトで有効になっているバリアントの完全なリストについては、このページの最後にあるreference tableを参照してください。

Tailwindがサポートしていない疑似クラスをターゲットにする必要がある場合は、バリアントプラグインを作成することでサポートされているバリアントを拡張できます。


Hover

ホバーにのみユーティリティを適用するには、hover:プレフィックスを追加します。

<button class="bg-transparent hover:bg-blue-500 text-blue-700 hover:text-white...">
  Hover me
</button>

tailwind.config.jsファイルのvariantsセクションでユーティリティに対してhoverバリアントを有効にするかどうかを制御できます。

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

Focus

フォーカスにユーティリティのみを適用するには、focus:プレフィックスを追加します。

<input class="bg-gray-200 focus:bg-white border-transparent focus:border-blue-400 ..." placeholder="Focus me">

tailwind.config.jsファイルのvariantsセクションでユーティリティに対してfocusバリアントを有効にするかどうかを制御できます。

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

Active

要素がアクティブな場合にのみユーティリティを適用するには、active:プレフィックスを追加します。

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

tailwind.config.jsファイルのvariantsセクションでユーティリティに対してactiveバリアントを有効にするかどうかを制御できます。

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

Group-hover

特定の親要素にカーソルを合わせるときに子要素のスタイルを設定する必要がある場合は、親要素に.groupクラスを追加し、子要素のユーティリティにgroup-hover:プレフィックスを追加します。

New Project

Create a new project from a variety of starting templates.

<div class="group bg-white hover:bg-blue-500 ...">
  <p class="text-gray-900 group-hover:text-white ...">New Project</p>
  <p class="text-gray-700 group-hover:text-white ...">Create a new project from a variety of starting templates.</p>
</div>

tailwind.config.jsファイルのvariantsセクションでユーティリティに対してgroup-hoverバリアントを有効にするかどうかを制御できます。

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

Group-focusv1.3.0+

group-focusバリアントは、フォーカスを除いてgroup-hoverと同じように機能します。

<button class="group text-gray-700 focus:text-gray-900 ...">
  <svg class="h-6 w-6 text-gray-400 group-focus:text-gray-500"><!-- ... --></svg>
  Submit
</button>

tailwind.config.jsファイルのvariantsセクションでユーティリティに対してgroup-focusバリアントを有効にするかどうかを制御できます。

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

Focus-within

focus-withinはIEまたはEdge< 79ではサポートされていないことに注意してください

子要素にフォーカスがある場合にのみユーティリティを適用するには、focus-within:プレフィックスを追加します。

<form class="border-b-2 border-gray-400 focus-within:border-teal-500 ...">
  <input class="..." placeholder="Jane Doe" ...>
  <button class="...">
    Sign Up
  </button>
</form>

tailwind.config.jsファイルのvariantsセクションでユーティリティに対してfocus-withinバリアントを有効にするかどうかを制御できます。

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

Focus-visiblev1.5.0+

現在、focus-visibleには、十分なブラウザサポートのためにポリフィルが必要であることに注意してください。

focus-visible:プレフィックスを追加して、要素にフォーカスがある場合にのみユーティリティを適用しますが、ユーザーがキーボードを使用している場合に限ります。

<ul class="flex space-x-8">
  <li>
    <a class="focus:outline-none focus:underline ..." href="#">
      Underlined on focus
    </a>
  </li>
  <li>
    <a class="focus:outline-none focus-visible:underline ..." href="#">
      Underlined on focus-visible
    </a>
  </li>
</ul>

現在、FirefoxとChromeのみがネイティブで focus-visibleをサポートしていることに注意してください。 十分なブラウザサポートのためにfocus-visible JS polyfillfocus-visible PostCSS polyfillの両方をインストールして構成する必要があります。 PostCSSプラグインのリストにPostCSSプラグインの 後に Tailwindを必ず含めてください。

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

tailwind.config.jsファイルのvariantsセクションでユーティリティに対してfocus-visibleバリアントを有効にするかどうかを制御できます。

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

Motion-safev1.6.0+

motion-safe:プレフィックスを追加して、prefers-reduced-motionメディア機能がno-preferenceと一致する場合にのみユーティリティを適用します。

たとえば、このボタンは、ユーザーがシステムで「モーションを減らす」を有効にしていない場合にのみ、ホバー時にアニメーション化します。

<button class="transform motion-safe:hover:-translate-y-1 motion-safe:hover:scale-110 transition ease-in-out duration-300 ...">
  Hover
</button>

他のほとんどのバリアントとは異なり、motion-safeは、次の順序でスタックすることにより、応答性のあるバリアントとhoverなどの他のバリアントの両方と組み合わせることができます。

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

tailwind.config.jsファイルのvariantsセクションでユーティリティに対してmotion-safeバリアントを有効にするかどうかを制御できます。

// tailwind.config.js
module.exports = {
  // ...
  variants: {
    translate: ['responsive', 'hover', 'focus', 'motion-safe'],
  },
}

Motion-reducev1.6.0+

motion-reduce:プレフィックスを追加して、prefers-reduced-motionメディア機能がreduceと一致する場合にのみユーティリティを適用します。

たとえば、このボタンはデフォルトでホバー時にアニメーション化しますが、ユーザーがシステムで「モーションを減らす」を有効にしている場合、アニメーションは無効になります。

<button class="transform motion-reduce:transform-none hover:-translate-y-1 hover:scale-110 transition ease-in-out duration-300 ...">
  Hover
</button>

他のほとんどのバリアントとは異なり、motion-reduceは、次の順序でスタックすることにより、応答性のあるバリアントとhoverなどの他のバリアントの両方と組み合わせることができます。

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

tailwind.config.jsファイルのvariantsセクションでユーティリティに対してmotion-reduceバリアントを有効にするかどうかを制御できます。

// tailwind.config.js
module.exports = {
  // ...
  variants: {
    translate: ['responsive', 'hover', 'focus', 'motion-reduce'],
  },
}

Disabledv1.1.0+

要素が無効になっている場合にのみユーティリティを適用するには、disabled:プレフィックスを追加します。

<button class="disabled:opacity-75 bg-blue-500...">
  Submit
</button>

<button disabled class="disabled:opacity-75 bg-blue-500...">
  Submit
</button>

tailwind.config.jsファイルのvariantsセクションでユーティリティに対してdisabledバリアントを有効にするかどうかを制御できます。

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

Visitedv1.1.0+

リンクにアクセスした場合にのみユーティリティを適用するには、visited:プレフィックスを追加します。

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

tailwind.config.jsファイルのvariantsセクションでユーティリティに対してvisitedバリアントを有効にするかどうかを制御できます。

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

Checkedv1.5.0+

checked:プレフィックスを追加して、ラジオまたはチェックボックスが現在チェックされている場合にのみユーティリティを適用します。

<input type="radio" class="appearance-none checked:bg-gray-900 checked:border-transparent ...">

tailwind.config.jsファイルのvariantsセクションでユーティリティに対してcheckedバリアントを有効にするかどうかを制御できます。

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

First-childv1.1.0+

first:プレフィックスを追加して、ユーティリティが親の最初の子である場合にのみユーティリティを適用します。 これは、要素が何らかのループで生成されている場合に最も役立ちます。

One
Two
Three
<div class="border rounded">
  <div v-for="item in items" class="border-t first:border-t-0">
    {{ item }}
  </div>
</div>

親要素ではなく、子要素にfirst:ユーティリティを追加する必要があることに注意することが重要です。

tailwind.config.jsファイルのvariantsセクションでユーティリティに対してfirstバリアントを有効にするかどうかを制御できます。

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

Last-childv1.1.0+

last:プレフィックスを追加して、ユーティリティが親の最後の子である場合にのみユーティリティを適用します。これは、要素が何らかのループで生成されている場合に最も役立ちます。

One
Two
Three
<div class="border rounded">
  <div v-for="item in items" class="border-b last:border-b-0">
    {{ item }}
  </div>
</div>

親要素ではなく、子要素にlast:ユーティリティを追加する必要があることに注意することが重要です。

tailwind.config.jsファイルのvariantsセクションでユーティリティに対してlastバリアントを有効にするかどうかを制御できます。

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

Odd-childv1.1.0+

親の奇数の子である場合にのみユーティリティを適用するには、odd:プレフィックスを追加します。これは、要素が何らかのループで生成されている場合に最も役立ちます。

One
Two
Three
<div class="border rounded">
  <div v-for="item in items" class="bg-white odd:bg-gray-200">
    {{ item }}
  </div>
</div>

親要素ではなく、子要素にodd:ユーティリティを追加する必要があることに注意することが重要です。

tailwind.config.jsファイルのvariantsセクションでユーティリティに対してoddバリアントを有効にするかどうかを制御できます。

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

Even-childv1.1.0+

親の偶数の子である場合にのみユーティリティを適用するには、even:プレフィックスを追加します。これは、要素が何らかのループで生成されている場合に最も役立ちます。

One
Two
Three
<div class="border rounded">
  <div v-for="item in items" class="bg-white even:bg-gray-200">
    {{ item }}
  </div>
</div>

親要素ではなく、子要素にeven:ユーティリティを追加する必要があることに注意することが重要です。

tailwind.config.jsファイルのvariantsセクションでユーティリティに対してevenバリアントを有効にするかどうかを制御できます。

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

Combining with responsive prefixes

疑似クラスのバリアントも応答性があります。つまり、たとえばさまざまなブレークポイントで要素のホバースタイルを変更するなどのことができます。

特定のブレークポイントに疑似クラスバリアントを適用するには、疑似クラスプレフィックスの前にレスポンシブプレフィックスを最初に追加します。

<div class="bg-orange-500 hover:bg-orange-600 sm:bg-green-500 sm:hover:bg-green-600 md:bg-red-500 md:hover:bg-red-600 lg:bg-indigo-500 lg:hover:bg-indigo-600 xl:bg-pink-500 xl:hover:bg-pink-600"></div>

Generative variants for custom utilities

CSSの@variantsディレクティブでラップすることにより、独自のカスタムユーティリティの疑似クラスバリアントを生成できます。

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

詳細については、@Variantsディレクティブのドキュメントを参照してください。


Creating custom variants

カスタムバリアントプラグインを作成することにより、Tailwindにデフォルトで含まれていない疑似クラスの独自のバリアントを作成できます。

たとえば、この単純なプラグインは、disabled疑似クラスバリアントのサポートを追加します。

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

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

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


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!