相同Tailwind代码在Python书评项目与Play.Tailwind输出不一致排查

我正在用Python开发一个书评Web应用，原本打算用网格形式展示书籍数据，但实际输出和预期效果不符。奇怪的是，把相同的代码放到Play.Tailwind里却能得到正确的布局，想请教问题出在哪里？

预期输出 #

实际输出 #

代码片段 #

<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet" />

<div class="container mx-auto px-4 py-6">
  <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">

    <div class="bg-white p-4 shadow-md rounded-lg">
      <img class="h-48 w-full object-cover object-center mb-4 rounded" src="https://www.gutenberg.org/cache/epub/84/pg84.cover.medium.jpg" alt="Book Cover">
      <h3 class="text-sm text-indigo-500 font-semibold mb-1">Frankenstein; Or, The Modern Prometheus</h3>
      <h2 class="text-lg text-gray-800 font-bold mb-2">Shelley, Mary Wollstonecraft</h2>
      <p class="text-gray-600 text-sm">Read by: 117026</p>
    </div>

    <div class="bg-white p-4 shadow-md rounded-lg">
      <img class="h-48 w-full object-cover object-center mb-4 rounded" src="https://www.gutenberg.org/cache/epub/2701/pg2701.cover.medium.jpg" alt="Book Cover">
      <h3 class="text-sm text-indigo-500 font-semibold mb-1">Moby Dick; Or, The Whale</h3>
      <h2 class="text-lg text-gray-800 font-bold mb-2">Melville, Herman</h2>
      <p class="text-gray-600 text-sm">Read by: 93457</p>
    </div>

    <div class="bg-white p-4 shadow-md rounded-lg">
      <img class="h-48 w-full object-cover object-center mb-4 rounded" src="https://www.gutenberg.org/cache/epub/1513/pg1513.cover.medium.jpg" alt="Book Cover">
      <h3 class="text-sm text-indigo-500 font-semibold mb-1">Romeo and Juliet</h3>
      <h2 class="text-lg text-gray-800 font-bold mb-2">Shakespeare, William</h2>
      <p class="text-gray-600 text-sm">Read by: 56729</p>
    </div>

    <div class="bg-white p-4 shadow-md rounded-lg">
      <img class="h-48 w-full object-cover object-center mb-4 rounded" src="https://www.gutenberg.org/cache/epub/1342/pg1342.cover.medium.jpg" alt="Book Cover">
      <h3 class="text-sm text-indigo-500 font-semibold mb-1">Pride and Prejudice</h3>
      <h2 class="text-lg text-gray-800 font-bold mb-2">Austen, Jane</h2>
      <p class="text-gray-600 text-sm">Read by: 54851</p>
    </div>
  </div>

问题排查方向 #

• 缺少视图端口元标签：Play.Tailwind默认会自动添加<meta name="viewport" content="width=device-width, initial-scale=1.0">，如果你的HTML头部没有这个标签，浏览器会用桌面视图缩放移动端页面，导致响应式网格不触发。赶紧把这个元标签加到<head>里试试。
• Tailwind版本不一致：你用的是v2.2.19，Play.Tailwind可能默认用v3版本，虽然核心网格逻辑变化不大，但某些细节可能有差异。可以尝试升级到最新稳定版，或者在Play.Tailwind里切换到相同版本测试。
• 其他CSS冲突：你的Python项目可能引入了其他CSS（比如框架自带样式、自定义CSS），这些样式可能覆盖了Tailwind的网格类。用浏览器开发者工具检查网格容器的计算样式，看有没有被其他规则覆盖的情况。
• 缓存问题：浏览器缓存了旧的CSS文件，导致新样式没生效。强制刷新页面（Ctrl+F5）或者清除浏览器缓存再测试。
• HTML结构差异：检查你的Python模板是否在网格容器外多套了其他元素，比如额外的容器或div，这些可能改变了父元素的尺寸，导致布局异常。对比Play.Tailwind里的代码结构，确保完全一致。

内容的提问来源于stack exchange，提问作者Aniket Ninama