How to make only placeholder italics in tailwind css?

Issue

I want to have an input text box that has only the placeholder as italics but not the text content.

I know we can do this using normal css like so:

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

But how to do it in tailwind way?

Solution

Define like this

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

Use like this

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

See a working example: Tailwind Play

Looks like this

Answered By – tauzN

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0