How can I apply a media query to height and width using Tailwind?

user_11828577 0
Viewed 5556

I want to do something like this with Tailwind,

@/media screen and (max-width: 995px) , screen and (max-height: 700px) { ... }

Is it possible?

tailwind-css css
2 Answers

Solved with:

screens: {
    'custombp': {'raw': '(max-height: 1234px),(min-width:920px)'}
}

Added on behalf of question asker.

user_18394390

In your tailwind config .js file you can add something like this. Follow the breakpoints link, there are other examples to study from.

module.exports = {
  theme: {
    screens: {
      'sm': '640px',
      // => @media (min-width: 640px) { ... }

      'md': '768px',
      // => @media (min-width: 768px) { ... }

      'lg': '1024px',
      // => @media (min-width: 1024px) { ... }

      'xl': '1280px',
      // => @media (min-width: 1280px) { ... }
    }
  }
}
user_53261910
Related