web-dev-qa-db-ja.com

TailwindCSSはプレースホルダーの色で@applyを使用します

TailwindCSSでプレースホルダーの色と一緒に@applyを使用しようとしていますが、他のプロパティと一緒に@applyを使用できますが、何らかの理由で機能しないようです。プレースホルダーの色オプションをCSSクラスとして使用することもできます。 @applyでは機能しません。

@tailwind base;

input {
  @apply placeholder-gray-900;
}

@tailwind components;

@tailwind utilities;

これを試してみると、次のエラーが発生します。

`@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.
tailwind-css
4
Tore

これは、プレースホルダーテキストが疑似セレクター::placeholderで変更されているためです。 placeholder docs を見ると、各クラス定義の後に薄い灰色で表示されています。

疑似セレクターを使用してクラスを@applyすることはできないため、次のような疑似セレクターをコードに追加する必要があります（ここでテキストカラーユーティリティを使用する必要があることに注意してください）。

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