Tailwind CSS 占位文本不透明度

占位文本不透明度

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

使用

使用 ?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-opacity-50? 來(lái)僅在中等大小及以上的屏幕應(yīng)用 ?placeholder-opacity-50? 功能類。

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

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

自定義

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

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

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

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

在 主題自定義文檔 中了解更多關(guān)于自定義默認(rèn)主題的信息。

變體

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

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

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

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

禁用

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

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