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

Question

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

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

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

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

标签： htmlcsstailwind-css

Answer 1

像这样定义

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

像这样使用

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

查看一个工作示例：Tailwind Play

看起来像这样