电子商务的网站开发,图片生成链接的app,wordpress 进销存,楼房平台设计前言
placeholder 在前端多用于 input、textarea 等任何输入或者文本区域的标签#xff0c;它用户在用户输入内容之前显示一些提示。浏览器自带的 placeholder 样式可能不符合设计规范#xff0c;此时就需要通过 css 进行样式美化。
当项目中使用 TailwindCSS 处理样式时它用户在用户输入内容之前显示一些提示。浏览器自带的 placeholder 样式可能不符合设计规范此时就需要通过 css 进行样式美化。
当项目中使用 TailwindCSS 处理样式时应该如何通过 TailwindCSS 设置 placeholder 的样式呢
问题
将 input 标签的 placeholder 样式设置成字体加粗、颜色为红色。 样式配置
TailwindCSS 方式
inputclassNameborder placeholder:text-red-900 placeholder:font-boldplaceholder请输入你的昵称/具体说明TailwindCSS 支持了placeholder 修饰符结合 TailwindCSS 支持的样式类即可实现对 placeholder 的样式修改。
placeholder:text-red-900 修改 placeholder 的字体颜色placeholder:font-bold 修改 placeholder 字重placeholder:text-lg 修改 placeholder 字体大小等等……
传统方式 input标签上定义id或者class inputidinputplaceholder请输入你的昵称/在style文件中设置 placeholder 样式 /* CSS3 标准 - Firefox, Chrome, Opera等 */
#input::placeholder {color: red;font-weight: 700;
}总结
TailwindCSS 设置 placeholder 的样式相比于传统方式继续保持了 TailwindCSS 本身的样式内聚的优点只需要设置节点的 class 内容一如既往的便捷。
相关原创文章推荐
在前端项目中开始使用 TailwindCSSTailwindCSS 如何配置默认单位为pxTailwindCSS 多主题色配置TailwindCSS 支持文本文字超长溢出截断、文字文本省略号TailwindCSS 如何设置 placeholder 的样式TailwindCSS 如何处理RTL布局模式Tailwindcss 配置检查器 - 可视化查看tailwindcss config最终效果
