Heim  >  Fragen und Antworten  >  Hauptteil

Verwenden von bedingten Medienabfrageanweisungen in Tailwind CSS

<p>Wie man das ausdrückt</p> <pre class="brush:php;toolbar:false;">${window.scrollY > 0 ? " bg-slate-50" : ""}</pre> <p>Wird die bedingte Anweisungsprüfung nur für Tailwind auf mittleren oder großen Bildschirmgrößen durchgeführt? </p>
P粉835428659P粉835428659459 Tage vor526

Antworte allen(2)Ich werde antworten

  • P粉676588738

    P粉6765887382023-08-11 14:28:01

    你可以通过将以下代码添加到你的代码中来轻松实现:

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

    这是Tailwind的做法。否则你可以自己编写自定义的CSS。

    请注意,请确保在你的tailwind.config.js中包含所需的变体,如果还没有启用的话:

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

    Antwort
    0
  • P粉492959599

    P粉4929595992023-08-11 11:56:12

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

    您还可以从Tailwind文档中了解更多信息: https://tailwindcss.com/docs/responsive-design#targeting-a-single-breakpoint

    Antwort
    0
  • StornierenAntwort