htmlcsstailwind-css

How to make only placeholder italics in tailwind css?

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

  • 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

    Italic placeholder

    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