アピアランス

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

Class reference

Class
Properties
.appearance-noneappearance: none;

使用方法

.appearance-noneを使用して、要素のブラウザ固有のスタイルをリセットします。 このユーティリティは、custom Form componentsを作成するときによく使用されます。

Default browser styles applied
Default styles removed
<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>

カスタマイズ

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

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

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

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

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

機能を使用しない場合

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

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

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

Tailwind UI is now in early access!