How to make only placeholder italics in tailwind css?

user_6372797 0
Viewed 4700

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?

tailwind-css css html
4 Answers

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

user_33309810

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

user_55724060
user_166512480

This should do the trick

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

Check out the docs

user_95982800
Related