Tailwind CSS でのメディア クエリ条件ステートメントの使用

Question

これをどう表現するか

${window.scrollY > 0 ? " bg-slate-50" : ""}

条件文のチェックは中または大画面サイズの Tailwind に対してのみ行われますか?

Answer 1

次のコードをコードに追加することで、これを簡単に行うことができます:

className={md:${window.scrollY > 0 ? "bg-slate-50" : "bg-transparent"}}

これが Tailwind のやっていることです。それ以外の場合は、カスタム CSS を自分で作成できます。

まだ有効になっていない場合は、必要なバリアントを tailwind.config.js に必ず含めてください:

リーリー

Answer 2

${window.scrollY > 0 ? "max-md:bg-slate-50" : ""}

Tailwind のドキュメントからも詳細を学ぶことができます。 https://tailwindcss.com/docs/sensitive-design#targeting-a-single-breakpoint