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

響應(yīng)式

要在特定的斷點(diǎn)處控制輸入框占位文本的顏色，請(qǐng)?jiān)谌魏维F(xiàn)有的占位文本顏色功能類前添加 ?{screen}:? 前綴。例如，使用 ?md:placeholder-green-500? 來(lái)僅在中等大小及以上的屏幕應(yīng)用 ?placeholder-green-500? 功能類。

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

關(guān)于 Tailwind 的響應(yīng)式設(shè)計(jì)功能的更多信息，請(qǐng)查看 響應(yīng)式設(shè)計(jì) 文檔。

焦點(diǎn)

要控制獲得焦點(diǎn)時(shí)元素的占位文本顏色，請(qǐng)?jiān)谌魏维F(xiàn)有的占位文本顏色功能類前添加 ?focus:? 前綴。例如，使用 ?focus:placeholder-blue-600? 在獲得焦點(diǎn)時(shí)應(yīng)用 ?placeholder-blue-600? 功能類。

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

通過(guò)在 ?focus:? 前綴前添加響應(yīng)式 ?{screen}:? 前綴，focus 功能類也可以與 responsive 功能類相結(jié)合。

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

自定義

占位符文本顏色

默認(rèn)情況下，Tailwind 使整個(gè)默認(rèn)調(diào)色板可用作占位符顏色。

您可以通過(guò)編輯 ?tailwind.config.js? 文件中的 ?theme.colors? 來(lái) 自定義您的調(diào)色板，或者在 ?theme.textColor? 部分只自定義您的占位文本顏色。

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

變體

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

您可以通過(guò)修改您的 ?tailwind.config.js? 文件中的 ?variants ?部分中的 ?placeholderColor ?屬性來(lái)控制為 placeholder color 功能生成哪些變體。

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

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

禁用

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

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