如何在顺风CSS中仅使占位符斜体？

Question

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

我知道我们可以使用普通的 css 来做到这一点，如下所示：

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

但如何以顺风的方式做到这一点呢？

Answer 1

从 Tailwind CSS v. 3.0 开始，占位符状态是内置的。检查这里的文档

像这样使用：

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

查看工作示例：Tailwind Play

看起来像这样

原始 Tailwind CSS 2 答案

像这样定义

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

像这样使用

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

查看工作示例：Tailwind Play