TailwindCSS use @apply with placeholder color

Question

I am trying to use @apply together with placeholder color in TailwindCSS, but for some reason, it does not seem to work although I am able to use @apply together with other properties. I am also able to use the placeholder color options as a CSS class. It just doesn't work with @apply.

@tailwind base;

input {
  @apply placeholder-gray-900;
}

@tailwind components;

@tailwind utilities;

By trying this I end up with this error:

`@apply` cannot be used with `.placeholder-gray-900` because `.placeholder-gray-900` either cannot be found, or its actual definition includes a pseudo-selector like :hover, :active, etc. If you're sure that `.placeholder-gray-900` exists, make sure that any `@import` statements are being properly processed *before* Tailwind CSS sees your CSS, as `@apply` can only be used for classes in the same CSS tree.

Answer 1

This is because the placeholder text is changed with a pseudo-selector, ::placeholder. If you look at the placeholder docs it's shown in light gray after each class definition.

As you can't @apply classes with a pseudo-selector, you'll need to add the pseudo-selector to your code, something like this (note you'll need to use the text color utilities here):

input::placeholder {
  @apply text-gray-900;
}