Tailwind CSS 占位文本颜色

占位文本颜色

用于控制占位文本颜色的功能类。

使用方法

使用 ​placeholder-{color}​ 功能类控制元素占位文本的颜色。

<input class="placeholder-gray-500 ..." placeholder="jane@example.com">
<input class="placeholder-red-300 ..." placeholder="jane@example.com">

改变不透明度

使用 ​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">

响应式

要在特定的断点处控制输入框占位文本的颜色，请在任何现有的占位文本颜色功能类前添加 ​{screen}:​ 前缀。例如，使用 ​md:placeholder-green-500​ 来仅在中等大小及以上的屏幕应用 ​placeholder-green-500​ 功能类。

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

关于 Tailwind 的响应式设计功能的更多信息，请查看 响应式设计 文档。

焦点

要控制获得焦点时元素的占位文本颜色，请在任何现有的占位文本颜色功能类前添加 ​focus:​ 前缀。例如，使用 ​focus:placeholder-blue-600​ 在获得焦点时应用 ​placeholder-blue-600​ 功能类。

<input class="placeholder-gray-600 focus:placeholder-gray-400 ..." placeholder="jane@example.com">

通过在 ​focus:​ 前缀前添加响应式 ​{screen}:​ 前缀，focus 功能类也可以与 responsive 功能类相结合。

<input class="... md:placeholder-gray-900 md:focus:placeholder-red-600 ...">

自定义

占位符文本颜色

默认情况下，Tailwind 使整个默认调色板可用作占位符颜色。

您可以通过编辑 ​tailwind.config.js​ 文件中的 ​theme.colors​ 来 自定义您的调色板，或者在 ​theme.textColor​ 部分只自定义您的占位文本颜色。

  // tailwind.config.js
  module.exports = {
    theme: {
     placeholderColor: theme => theme('colors'),
     placeholderColor: {
       'primary': '#3490dc',
       'secondary': '#ffed4a',
       'danger': '#e3342f',
     }
    }
  }

变体

默认情况下， 针对 placeholder color 功能类，只生成 responsive, dark mode (if enabled) and focus 变体。

您可以通过修改您的 ​tailwind.config.js​ 文件中的 ​variants ​部分中的 ​placeholderColor ​属性来控制为 placeholder color 功能生成哪些变体。

例如，这个配置也将生成 hover and active 变体:

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

禁用

如果您不打算在您的项目中使用 placeholder color 功能，您可以通过在配置文件的 ​corePlugins ​部分将 ​placeholderColor ​属性设置为 ​false ​来完全禁用它们：

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