如何在顺风css中只使用占位符斜体？

cbjzeqam 于 2022-12-15 发布在其他

关注(0)|答案(5)|浏览(139)

我想有一个输入文本框，只有占位符作为斜体，但没有文本内容。
我知道我们可以用普通的css来做这个：

::-webkit-input-placeholder {
   font-style: italic;
}

但如何做到顺风的方式呢？

5条答案

占位符状态从Tailwind CSS v. 3.0开始是内置的。

<input type="text" class="placeholder:italic" />

请参见工作示例：Tailwind Play
看起来像这样

@layer utilities {
  .placeholder-italic::placeholder{
    @apply italic
  }
}

<input type="text" class="placeholder-italic" />

请参见工作示例：Tailwind Play

我没有找到一个现有的Tailwind实用程序来改变字体样式属性，但是在Tailwind中你可以创建你的自定义实用程序。

@layer utilities {
  .italic-plc::placeholder {
     font-style: italic;
  }
}

使用placeholder-shown:italic
工作示例：Tailwind Play

这个应该可以

<input class="placeholder:italic placeholder:text-gray-400" />

查看文档

在顺风v3.0中

如果你想大胆一点。

<input type="text" class="placeholder:font-bold" />