如何使用 Tailwind 将媒体查询应用于高度和宽度？

Question

我想用 Tailwind 做这样的事情，

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

是否可以？

Answer 1

解决方法：

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

_{代表提问者添加。}

Answer 2

在您的 tailwind 配置 .js 文件中，您可以添加类似的内容。点击断点链接，还有其他示例可供学习。

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