Tailwind CSS 表單外觀

表單外觀

用于控制原生表單控件樣式的功能類。

使用

使用 ?appearance-none? 來重置一個(gè)元素的所有瀏覽器特定樣式。這個(gè)功能通常用于創(chuàng)建自定義表單組件。

<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>

自定義

變體

默認(rèn)情況下， 針對(duì) appearance 功能類，只生成 responsive 變體。

您可以通過修改您的 ?tailwind.config.js? 文件中的 ?variants ?部分中的 ?appearance ?屬性來控制為 appearance 功能生成哪些變體。

例如，這個(gè)配置也將生成 hover and focus 變體:

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

禁用

如果您不打算在您的項(xiàng)目中使用 appearance 功能，您可以通過在配置文件的 ?corePlugins ?部分將 ?appearance ?屬性設(shè)置為 ?false ?來完全禁用它們：

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