點燈坊

失くすものさえない今が強くなるチャンスよ

使用 placeholder- 設定 Placeholder Opacity

Sam Xiao's Avatar 2021-02-22

若要改變 TextBox 的 Placeholder Opacity，可使用 placeholder- 系列 Utility。

Version

Tailwind CSS 2.0.3

Placeholder Opacity

opacity000

TextBox placeholder 的文字雖然是灰色，但變得很淡。

<template>
  <input type="text" placeholder="Tailwind CSS" class="placeholder-gray-500 placeholder-opacity-50 border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500">
</template>
  • placeholder-gray-500：設定 placeholder 顏色
  • placeholder-opacity-50：設定 placeholder opacity

Conclusion

  • placeholder- 系列 utility 讓我們可以直接設定 placeholder opacity，而不用另外撰寫 CSS

Reference

Tailwind CSS, Placeholder Opacity

# TailwindCSS