CODEWITHSUNDEEP
csstailwind-css
user11828577
user11828577

Reputation:

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

I want to do something like this with Tailwind,

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

Is it possible?

Upvotes: 17

Views: 21472

Answers (5)

Jakob Vase
Jakob Vase

Reputation: 149

These days you can do

<div class="[@media(max-height:425px)]:hidden">

if you just need a one-off solution.

Upvotes: 6

Paul Clark
Paul Clark

Reputation: 91

As suggested above, you can use raw to create granular breakpoints based on both height and width, here's a link to the relevant docs which I was only able to find after reading the above answers:

https://tailwindcss.com/docs/screens#custom-media-queries

Upvotes: 1

Syed Zubair
Syed Zubair

Reputation: 51

I have solved this specific problem, you can do like this,

screens: { 'custom-height-mq': { 'raw': '((max-width: 995px) and (max-height: 700px))' }, }

Similarly, you can apply any media query. You can use other logical operators as well and, or etc.

Upvotes: 3

anon
anon

Reputation:

Solved with:

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

Added on behalf of question asker.

Upvotes: 24

Digvijay
Digvijay

Reputation: 8927

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) { ... }
    }
  }
}

Upvotes: -12

Related Questions