如何使用Tailwind CSS实现移动端卡片全屏宽且图文横向并排展示

问题解决修改方案 #

你需要调整3处核心的Tailwind类配置即可实现需求：

• 外层容器去掉移动端的宽度限制和外边距：移除全局的max-w-md、m-6，改为md:max-w-2xl md:m-6，移动端默认使用全宽无左右外边距
• 容器的弹性布局取消断点限制：把md:flex改为flex，所有视口尺寸下都保持横向弹性布局，确保图片永远在内容侧边
• 图片样式取消移动端的全屏宽度和固定高度：移除h-48 w-full，保持全尺寸下的h-full w-20（可根据需求调整宽度数值）

修改后的完整代码如下：

<div class="bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl md:m-6">
  <div class="flex">
    <div class="flex-shrink-0">
      <img class="h-full w-20 object-cover" src="..." alt="文章封面">
    </div>
    <div class="p-8">
      <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">案例研究</div>
      <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black hover:underline">为新业务找到目标客户</a>
      <p class="mt-2 text-gray-500">从零启动新业务需要投入大量精力，这里提供5个思路帮你找到第一批客户。</p>
    </div>
  </div>
</div>

如果需要移动端侧边图片宽度更大，调整w-20为w-24/w-28等尺寸类即可。

内容的提问来源于stack exchange，提问作者David Andor