前言

placeholder 在前端多用于 input、textarea 等任何輸入或者文本區域的標簽，它用戶在用戶輸入內容之前顯示一些提示。瀏覽器自帶的 placeholder 樣式可能不符合設計規范，此時就需要通過 css 進行樣式美化。

當項目中使用 TailwindCSS 處理樣式時，應該如何通過 TailwindCSS 設置 placeholder 的樣式呢？

問題

將 input 標簽的 placeholder 樣式設置成字體加粗、顏色為紅色。

樣式配置

TailwindCSS 方式

<inputclassName="border placeholder:text-red-900 placeholder:font-bold"placeholder="請輸入你的昵稱"/>

具體說明，TailwindCSS 支持了placeholder 修飾符，結合 TailwindCSS 支持的樣式類，即可實現對 placeholder 的樣式修改。

• placeholder:text-red-900 修改 placeholder 的字體顏色；
• placeholder:font-bold 修改 placeholder 字重；
• placeholder:text-lg 修改 placeholder 字體大小；
• 等等……

傳統方式

1. input標簽上定義id或者class；

   <inputid="input"placeholder="請輸入你的昵稱"/>
   

2. 在style文件中設置 placeholder 樣式；

   /* CSS3 標準 - Firefox, Chrome, Opera等 */
   #input::placeholder {color: red;font-weight: 700;
   }
   

總結

TailwindCSS 設置 placeholder 的樣式相比于傳統方式，繼續保持了 TailwindCSS 本身的樣式內聚的優點，只需要設置節點的 class 內容，一如既往的便捷。

相關原創文章推薦

• 在前端項目中開始使用 TailwindCSS
• TailwindCSS 如何配置默認單位為px
• TailwindCSS 多主題色配置
• TailwindCSS 支持文本文字超長溢出截斷、文字文本省略號
• TailwindCSS 如何設置 placeholder 的樣式
• TailwindCSS 如何處理RTL布局模式
• Tailwindcss 配置檢查器 - 可視化查看tailwindcss config最終效果