Question 226999 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – conditional statement for media query on tailwindcss

How can i put this

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

Conditional statement only for medium or large screens on tailwind?

Tags:

3

Answers


  1. 0

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

    you can also get the reference from the documentation of Tailwind for more info:
    https://tailwindcss.com/docs/responsive-design#targeting-a-single-breakpoint

    Login or Signup to reply.
  2. 0

    You can easily do it by adding this in your code:

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

    Thats tailwind way of doing it. otherwise you can always write the custom css.

    Note Please make sure to include the required variant in your tailwind.config.js if it’s not already enabled:

     module.exports = {
      variants: {
        backgroundColor: ['responsive', 'hover', 'focus'],
        // ... other configurations
      },
}
    Login or Signup to reply.
  3. 0

    Code:

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

    You can follow this documentation for more info:

    https://tailwindcss.com/docs/responsive-design

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search