CODEWITHSUNDEEP
htmlcsstailwind-css
Manoj Singh
Manoj Singh

Reputation: 2871

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?

Upvotes: 11

Views: 15873

Answers (5)

tauzN
tauzN

Reputation: 6931

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

Upvotes: 18

Justin Herrera
Justin Herrera

Reputation: 653

In Tailwind v3.0

If you want to make it bold.

<input type="text" class="placeholder:font-bold" />

Upvotes: 1

Dalin Oluoch
Dalin Oluoch

Reputation: 75

This should do the trick

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

Check out the docs

Upvotes: 0

Ankush Dutt
Ankush Dutt

Reputation: 11

Use placeholder-shown:italic

Working example: Tailwind Play

Upvotes: 1

the_previ
the_previ

Reputation: 682

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

Upvotes: 1

Related Questions