👆

【Tailwind和訳】INTERACTIVITY/Outline

2021/10/25に公開約2,700字

この記事について

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

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


Outline

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

クラス プロパティ
outline-none outline: 2px solid transparent;<br>outline-offset: 2px;
outline-white outline: 2px dotted white;<br>outline-offset: 2px;
outline-black outline: 2px dotted black;<br>outline-offset: 2px;

アウトラインの削除

outline-noneを使用すると、フォーカスされた要素のデフォルトのブラウザのアウトラインを隠すことができます。

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

Image from Gyazo

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

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

outline-noneユーティリティは、Windows のハイコントラストモードのユーザーが要素のフォーカスを確認できるように、フードの下に透明なアウトラインを使用して実装されています。

点線のアウトライン

outline-whiteおよびoutline-blackユーティリティを使用すると、2px のオフセットで要素の周囲に 2px の点線の境界線を追加することができます。これらは、独自のデザインをしたくない場合に、利用しやすい汎用的なカスタムフォーカススタイルとして便利です。

Image from Gyazo

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

カスタマイズ

アウトライン

デフォルトでは、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"],
      },
    },
  },
}

バリアント

デフォルトでは、レスポンシブ、フォーカスウィズイン、フォーカスの各バリアントのみがアウトライン・ユーティリティのために生成されます。

tailwind.config.js ファイルの variants セクションにある outline プロパティを変更することで、アウトラインユーティリティのために生成されるバリアントをコントロールすることができます。

例えば、この設定では、hover と active のバリアントも生成されます。

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

無効化

プロジェクトでアウトラインユーティリティーを使用する予定がない場合は、設定ファイルのcorePluginsセクションでoutlineプロパティをfalseに設定することで、完全に無効にすることができます。

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

Discussion

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