Tailwind CSS Flex布局在iPad上失效的问题及修复方法

问题根源 #

Tailwind 默认的lg断点为1024px，而iPad横屏分辨率恰好是1024px，会触发lg对应的“每行4个”样式，导致不符合需求。如果代码中未精准区分iPad对应的断点范围，就会出现这个问题。

具体修复方案 #

方案1：自定义Tailwind断点配置 #

修改tailwind.config.js，调整断点范围或新增iPad专属断点，避免iPad横屏误触大尺寸样式：

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    screens: {
      'sm': '640px',
      'ipad': '768px',
      'lg': '1025px', // 将lg断点从1024px上调，让iPad横屏触发ipad断点
      'xl': '1280px',
      '2xl': '1536px',
    },
  },
}

然后在HTML中使用对应类：

<div class="grid grid-cols-1 ipad:grid-cols-2 lg:grid-cols-4 gap-4">
  <div>区块1</div>
  <div>区块2</div>
  <div>区块3</div>
  <div>区块4</div>
</div>

方案2：用现有断点精准控制 #

无需修改配置，通过max-lg类限制大尺寸样式仅在屏幕宽度超过1024px时生效：

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 max-lg:grid-cols-2 gap-4">
  <div>区块1</div>
  <div>区块2</div>
  <div>区块3</div>
  <div>区块4</div>
</div>

这样屏幕宽度≤1024px时（含iPad横屏）保持每行2个，仅宽度>1024px的设备显示每行4个。

方案3：自定义媒体查询 #

如果需要更精准的设备适配，直接添加针对iPad的媒体查询：

<style>
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .ipad-grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
</style>

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 ipad-grid-cols-2 gap-4">
  <div>区块1</div>
  <div>区块2</div>
  <div>区块3</div>
  <div>区块4</div>
</div>

验证方式 #

通过浏览器开发者工具的设备模拟功能，分别测试手机（每行1个）、iPad横竖屏（每行2个）、桌面设备（宽度>1024px，每行4个）的显示效果。

内容的提问来源于stack exchange，提问作者Petro Gromovo