Using media query conditional statements in Tailwind CSS

Question

How to express this

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

Is conditional statement checking only for Tailwind on medium or large screen sizes?

Answer 1

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
      },
}

Answer 2

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