Home  >  Q&A  >  body text

Using media query conditional statements in Tailwind CSS

<p>How to express this</p> <pre class="brush:php;toolbar:false;">${window.scrollY > 0 ? " bg-slate-50" : ""}</pre> <p>Is conditional statement checking only for Tailwind on medium or large screen sizes? </p>
P粉835428659P粉835428659459 days ago528

reply all(2)I'll reply

  • P粉676588738

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

    You can easily do this by adding the following code to your code:

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

    This is what Tailwind does. Otherwise you can write custom CSS yourself.

    Please note, please make sure to include the required variants in your tailwind.config.js if not already enabled:

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

    reply
    0
  • P粉492959599

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

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

    You can also learn more from the Tailwind documentation: https://tailwindcss.com/docs/responsive-design#targeting-a-single-breakpoint

    reply
    0
  • Cancelreply