アウトライン

要素のアウトラインを制御するためのユーティリティ。

Class reference

Class
Properties
.outline-noneoutline: 2px solid transparent; outline-offset: 2px;
.outline-whiteoutline: 2px dotted white; outline-offset: 2px;
.outline-blackoutline: 2px dotted black; outline-offset: 2px;

Remove outlines

フォーカスされた要素のデフォルトのブラウザアウトラインを非表示にするにはoutline-noneを使用します。

このユーティリティを使用するときは、アクセシビリティのために独自のフォーカススタイルを適用することを強くお勧めします。

<input type="text"
  placeholder="Default focus style"
  class="..." />

<input type="text"
  placeholder="Custom focus style"
  class="focus:outline-none focus:shadow-outline focus:border-blue-300 ..." />

outline-noneユーティリティは、内部で透明なアウトラインを使用して実装され、要素が Windows high contrast mode ユーザーに視覚的に焦点を合わせていることを確実にします。

Dotted outlinesv1.9.0+

outline-whiteおよびoutline-blackユーティリティを使用して、2pxのオフセットを持つ要素の周りに2pxの点線のボーダーラインを追加します。 これらは、独自にデザインしたくない場合に、アクセス可能な汎用カスタムフォーカススタイルとして役立ちます。

<button class="focus:outline-black ...">Button A</button>
<button class="focus:outline-white ...">Button B</button>

カスタマイズ

Outlinesv1.9.0+

デフォルトでは、Tailwindは3つのアウトラインユーティリティを提供します。 これらは、tailwind.config.jsファイルのtheme.outlineセクションを編集することでカスタマイズできます。

  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        outline: {
          blue: '2px solid #0000ff',
        }
      }
    }
  }

[outline、outlineOffset]の形式のタプルを使用して、カスタムアウトラインユーティリティにoutline-offset値を指定することもできます。

  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        outline: {
          blue: ['2px solid #0000ff', '1px'],
        }
      }
    }
  }

レスポンシブと疑似バリアントクラス

デフォルトでonly responsive and focus バリアントはoutline utilitiesのために作られます。

あなたはどのバリアントがoutline utilitiesのために作られるかを tailwind.config.jsファイル内のvariantsセクションのoutlineプロパティを修正することによってコントロールできます。

例として、この設定は also hover and active バリアントを作ります。

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

無効にする

もしoutline utilitiesを使う予定がないなら、configファイルのcorePluginsセクションのoutline propertyfalseに設定することで完全に無効にすることができます。

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     outline: false,
    }
  }

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

Tailwind UI is now in early access!