How to make only placeholder italics in tailwind css?

Question

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?

Answer 1

Placeholder state is built-in as of Tailwind CSS v. 3.0. Check the docs here

Use like this:

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

See a working example: Tailwind Play

Looks like this

---

Original Tailwind CSS 2 answer

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

Answer 2

I'm not found an existing Tailwind utility to change the font-style property, but in Tailwind you can create your custom utilities.

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

TailwindCSS related doc page: https://tailwindcss.com/docs/adding-new-utilities

Answer 3

Use placeholder-shown:italic

Working example: Tailwind Play

Answer 4

This should do the trick

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

Check out the docs