占位文本不透明度

用來控制元素占位文本顏色的不透明度的功能類。

使用

使用 ?placeholder-opacity-{amount}? 功能類控制元素的占位文本顏色的不透明度。

<input class="placeholder-gray-500 placeholder-opacity-100 ..." placeholder="jane@example.com">
<input class="placeholder-gray-500 placeholder-opacity-75 ..." placeholder="jane@example.com">
<input class="placeholder-gray-500 placeholder-opacity-50 ..." placeholder="jane@example.com">
<input class="placeholder-gray-500 placeholder-opacity-25 ..." placeholder="jane@example.com">
<input class="placeholder-gray-500 placeholder-opacity-0 ..." placeholder="jane@example.com">

響應式

要在特定的斷點處控制元素占位文本顏色的不透明度，請在任何現(xiàn)有的占位文本顏色不透明度功能類前添加 ?{screen}:? 前綴。例如，使用 ?md:placeholder-opacity-50? 來僅在中等大小及以上的屏幕應用 ?placeholder-opacity-50? 功能類。

<input class="placeholder-gray-500 placeholder-opacity-75 md:placeholder-opacity-50 ..." placeholder="jane@example.com">

關于 Tailwind 的響應式設計功能的更多信息，請查看 響應式設計 文檔。

自定義

要一次性自定義所有與不透明度相關的功能類的不透明度值，請使用您的 ?tailwind.config.js? 主題配置中的 ?opacity ?部分。

  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        opacity: {
         '15': '0.15',
         '35': '0.35',
         '65': '0.65',
        }
      }
    }
  }

如果您只想自定義占位文本不透明度功能類，請使用 ?placeholderOpacity ?部分。

  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        placeholderOpacity: {
         '10': '0.1',
         '20': '0.2',
         '95': '0.95',
        }
      }
    }
  }

在 主題自定義文檔 中了解更多關于自定義默認主題的信息。

變體

默認情況下， 針對 placeholder opacity 功能類，只生成 responsive, dark mode (if enabled) and focus 變體。

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

例如，這個配置也將生成 hover and active 變體:

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

禁用

如果您不打算在您的項目中使用 placeholder opacity 功能，您可以通過在配置文件的 ?corePlugins ?部分將 ?placeholderOpacity ?屬性設置為 ?false ?來完全禁用它們：

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