如何在顺风CSS中只制作占位符斜体？答案

【问题标题】：How to make only placeholder italics in tailwind css?如何在顺风CSS中只制作占位符斜体？
【发布时间】：2021-07-04 05:24:00
【问题描述】：

我想要一个输入文本框，它只有占位符作为斜体，但没有文本内容。

我知道我们可以像这样使用普通的 css 来做到这一点：

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

但是如何顺风顺水呢？

【问题讨论】：

【解决方案1】：

这应该可以解决问题

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

【讨论】：

【解决方案2】：

使用placeholder-shown:italic

工作示例：Tailwind Play

【讨论】：

【解决方案3】：

我没有找到用于更改字体样式属性的现有 Tailwind 实用程序，但您可以在 Tailwind 中创建自定义实用程序。

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

【讨论】：

【解决方案4】：

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

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

查看一个工作示例：Tailwind Play

【讨论】：