TailWindCSS最大高度

Question

因此，我想知道如何在TailWindCSS Config中设置最大高度媒体断点。IPad Pro因其宽度而被认为是笔记本电脑。也就是说，对于笔记本电脑CSS来说，它们太高了，这让我的网站看起来很糟糕。

欢迎帮忙谢谢贾斯汀。

Answer 1

我在Tailwind文档中吐口水，似乎有none用于最大高度媒体查询。

但是您可以创建自己的自定义媒体查询。我不知道iPad Pro的高度。但我做了一个基于文档的例子。(也有未经测试的例子)

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

编辑:我不确定这个输出会是什么，我猜是iPad:text-xl之类的。

Answer 2

您只需将其直接应用于jsx元素内联。例如

 <div className='max-h-[1234px]'></div>