Utilisation des instructions conditionnelles de requête multimédia dans Tailwind CSS

Question

Comment exprimer cela

${window.scrollY > 0 ?
L'instruction conditionnelle vérifie-t-elle uniquement Tailwind sur des écrans de taille moyenne ou grande ? 

Answer 1

Vous pouvez facilement le faire en ajoutant le code suivant à votre code :

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

C'est ce que fait Tailwind. Sinon, vous pouvez écrire vous-même du CSS personnalisé.

Attention, assurez-vous d'inclure la variante requise dans votre tailwind.config.js si elle n'est pas déjà activée :

module.exports = {
      variants: {
        backgroundColor: ['responsive', 'hover', 'focus'],
        // ... other configurations
      },
}

Answer 2

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

Vous pouvez également en apprendre davantage dans la documentation Tailwind : https://tailwindcss.com/docs/responsive-design#targeting-a-single-breakpoint