How to target a child input's placeholder in Tailwind CSS?

Question

I'm currently working on a project and I'm trying to convert a CSS style that targets the ::placeholder pseudo-element into Tailwind CSS, but I'm facing some challenges. Here's the CSS code I'm trying to convert:

//CSS Code 

input::Placeholder{}

In Tailwind CSS, I'm familiar with how to select child elements using [&>(Child Element)]. However, I'm unsure about how to target pseudo-elements like ::placeholder in Tailwind CSS.

As i am thinking [&>input]:placeholder:(target) ?

Could someone please assist me in converting the ::placeholder selector into Tailwind CSS classes? I would greatly appreciate any guidance or suggestions on how to achieve the same styling for ::placeholder using Tailwind. Thank you!

I attempted to convert the CSS ::placeholder into Tailwind CSS, seeking a specific Tailwind solution for styling input placeholders effectively.

Answer 1

In Tailwind 3.0 we can now use, for example, placeholder:italic as a class on the input element to style the placeholder.

https://tailwindcss.com/docs/hover-focus-and-other-states#placeholder-text