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

Posted 2023-03-07

技术标签:

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

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

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

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

但是如何顺风顺水呢？

【问题讨论】：

【参考方案1】：

这应该可以解决问题

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

Check out the docs

【讨论】：

【参考方案2】：

使用placeholder-shown:italic

工作示例：Tailwind Play

【讨论】：

【参考方案3】：

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

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

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

【讨论】：

这也会使值变为斜体；不仅仅是占位符 @tauzN 你说得对，我忘了加::placeholder。现在我已经更正了我的答案【参考方案4】：

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

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

查看一个工作示例：Tailwind Play

【讨论】：

以上是关于如何在顺风CSS中只制作占位符斜体？的主要内容，如果未能解决你的问题，请参考以下文章