如何在顺风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

Answer 2

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

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

TailwindCSS 相关文档页面：https://tailwindcss.com/docs/adding-new-utilities

Answer 3

使用

placeholder-shown:italic

工作示例：Tailwind Play

Answer 4

在 Tailwind v3.0 中

如果你想加粗的话。

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

Answer 5

这应该可以解决问题

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

查看文档