【Tailwind和訳】INTERACTIVITY/Appearance

この記事について

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

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

---

Appearance

ネイティブなフォームコントロールのスタイルを抑制するためのユーティリティ。

クラス	プロパティ
appearance-none	appearance: none;

使用方法

要素のブラウザ固有のスタイルをリセットするには、appearance-none を使用します。このユーティリティは、カスタムフォームコンポーネントを作成する際によく使用されます。

<select>
  <option>Yes</option>
  <option>No</option>
  <option>Maybe</option>
</select>

<select class="appearance-none">
  <option>Yes</option>
  <option>No</option>
  <option>Maybe</option>
</select>

カスタマイズ

バリアント

デフォルトでは、外観ユーティリティにはレスポンシブバリアントのみが生成されます。

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

例えば、この設定ではホバーとフォーカスのバリアントも生成されます。

tailwind.config.js

  module.exports = {
    variants: {
      extend: {
        // ...
+      appearance: ['hover', 'focus'],
      }
    }
  }

無効化

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

tailwind.config.js

  module.exports = {
    corePlugins: {
      // ...
+    appearance: false,
    }
  }