Search code examples
cssmedia-queriestailwind-css

TailWindCSS Max Height (Pre Vers 3.0)

So I want to know how to set a Max Height Media Breakpoint in TailWindCSS Config. IPad Pro's are recognised as Laptops because of their width. That said, they are far too tall for Laptop CSS, making my site look horrible.

Any help welcome, Thanks, Justin.

Solution

  • I spit through the Tailwind docs, it seems like there are none for Max Height media queries.

    But you can create your own Custom media queries. I don't known the height of an iPad Pro. But I made an example based on the docs. (Also untested example)

    // tailwind.config.js
module.exports = {
  theme: {
    extend: {
      screens: {
        'iPad': {'raw': '(max-height: 1234px)'},
        // => @media (max-height: 1234px) { ... }
      }
    }
  }
}

    Edit: I'm not sure what the output of this will be, my guess iPad:text-xl or something.