Tailwind CSS on GitHub

占位文本颜色

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

Default class reference

Class
Preview 
placeholder-transparent::placeholder
Aa
placeholder-current::placeholder
Aa
placeholder-black::placeholder
Aa
placeholder-white::placeholder
Aa
placeholder-gray-50::placeholder
Aa
placeholder-gray-100::placeholder
Aa
placeholder-gray-200::placeholder
Aa
placeholder-gray-300::placeholder
Aa
placeholder-gray-400::placeholder
Aa
placeholder-gray-500::placeholder
Aa
placeholder-gray-600::placeholder
Aa
placeholder-gray-700::placeholder
Aa
placeholder-gray-800::placeholder
Aa
placeholder-gray-900::placeholder
Aa
placeholder-red-50::placeholder
Aa
placeholder-red-100::placeholder
Aa
placeholder-red-200::placeholder
Aa
placeholder-red-300::placeholder
Aa
placeholder-red-400::placeholder
Aa
placeholder-red-500::placeholder
Aa
placeholder-red-600::placeholder
Aa
placeholder-red-700::placeholder
Aa
placeholder-red-800::placeholder
Aa
placeholder-red-900::placeholder
Aa
placeholder-yellow-50::placeholder
Aa
placeholder-yellow-100::placeholder
Aa
placeholder-yellow-200::placeholder
Aa
placeholder-yellow-300::placeholder
Aa
placeholder-yellow-400::placeholder
Aa
placeholder-yellow-500::placeholder
Aa
placeholder-yellow-600::placeholder
Aa
placeholder-yellow-700::placeholder
Aa
placeholder-yellow-800::placeholder
Aa
placeholder-yellow-900::placeholder
Aa
placeholder-green-50::placeholder
Aa
placeholder-green-100::placeholder
Aa
placeholder-green-200::placeholder
Aa
placeholder-green-300::placeholder
Aa
placeholder-green-400::placeholder
Aa
placeholder-green-500::placeholder
Aa
placeholder-green-600::placeholder
Aa
placeholder-green-700::placeholder
Aa
placeholder-green-800::placeholder
Aa
placeholder-green-900::placeholder
Aa
placeholder-blue-50::placeholder
Aa
placeholder-blue-100::placeholder
Aa
placeholder-blue-200::placeholder
Aa
placeholder-blue-300::placeholder
Aa
placeholder-blue-400::placeholder
Aa
placeholder-blue-500::placeholder
Aa
placeholder-blue-600::placeholder
Aa
placeholder-blue-700::placeholder
Aa
placeholder-blue-800::placeholder
Aa
placeholder-blue-900::placeholder
Aa
placeholder-indigo-50::placeholder
Aa
placeholder-indigo-100::placeholder
Aa
placeholder-indigo-200::placeholder
Aa
placeholder-indigo-300::placeholder
Aa
placeholder-indigo-400::placeholder
Aa
placeholder-indigo-500::placeholder
Aa
placeholder-indigo-600::placeholder
Aa
placeholder-indigo-700::placeholder
Aa
placeholder-indigo-800::placeholder
Aa
placeholder-indigo-900::placeholder
Aa
placeholder-purple-50::placeholder
Aa
placeholder-purple-100::placeholder
Aa
placeholder-purple-200::placeholder
Aa
placeholder-purple-300::placeholder
Aa
placeholder-purple-400::placeholder
Aa
placeholder-purple-500::placeholder
Aa
placeholder-purple-600::placeholder
Aa
placeholder-purple-700::placeholder
Aa
placeholder-purple-800::placeholder
Aa
placeholder-purple-900::placeholder
Aa
placeholder-pink-50::placeholder
Aa
placeholder-pink-100::placeholder
Aa
placeholder-pink-200::placeholder
Aa
placeholder-pink-300::placeholder
Aa
placeholder-pink-400::placeholder
Aa
placeholder-pink-500::placeholder
Aa
placeholder-pink-600::placeholder
Aa
placeholder-pink-700::placeholder
Aa
placeholder-pink-800::placeholder
Aa
placeholder-pink-900::placeholder
Aa

使用方法

使用 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,
    }
  }