简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Utilisation des instructions conditionnelles de requête multimédia dans Tailwind CSS
P粉835428659
P粉835428659 2023-08-10 15:17:27
0
2
470

Comment exprimer cela

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

répondre à tous (2)
P粉676588738
P粉6765887382023-08-11 14:28:01 2 plancher

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 votretailwind.config.jssi elle n'est pas déjà activée :

module.exports = { variants: { backgroundColor: ['responsive', 'hover', 'focus'], // ... other configurations }, }
Comme+0
Ajouter une réponse
    P粉492959599
    P粉4929595992023-08-11 11:56:12 1 plancher

    ${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

    Comme+0
    Ajouter une réponse
      Sujets populaires
      Plus>
      Articles populaires
      Tutoriels populaires
      Plus>
      Tutoriels associés
      Recommandations populaires
      Derniers cours
      Derniers téléchargements
      Plus>
      effets Web
      Code source du site Web
      Matériel du site Web
      Modèle frontal
      À propos de nous Clause de non-responsabilité Sitemap
      Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！