使用Tailwind复刻Instagram时主图样式不生效问题求助

我用Tailwind CSS复刻Instagram登录页面，页面内其他元素及图片的Tailwind样式均正常生效，但唯独主图完全不显示，看起来像是样式未生效。以下是我编写的代码：

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="./output.css" rel="stylesheet" />
    <title>Tailwind</title>
  </head>
  <body>
    <div class="h-screen w-screen grid grid-cols-1 md:grid-cols-2 grid-rows-6">

      <!-- Main image-->
      <div class="row-span-5 md:flex justify-end hidden">
        <img class="max-w-96" src="./img/insta-img (1).png"/>
      </div>

      <!-- Form-->

      <div class="row-span-5 flex flex-col justify-center items-center grid-cols-1">
        <form class="w-80 flex flex-col justify-center items-center border rounded-sm px-10 py-4 gap-5 ">
          <img class="w-52" src="./img/insta-logo.png" alt="insta-logo" />

          <input class="bg-slate-50 h-9 w-full pl-3 border rounded-sm " type="text" placeholder="Phone Number, username, e-mail" />
          <input class="bg-slate-50 h-9 w-full pl-3 border rounded-sm " type="password" placeholder="Password"/>

          <button class="bg-blue-400 w-full rounded-md h-8 text-slate-50 hover:bg-slate-300">Entrar</button>

          <a class="text-blue-800 font-bold cursor-pointer" href="#">Log in with Facebook</a>
          <a class="text-blue-800 text-sm cursor-pointer" href="#">Forgot password?</a>
        </form>

        <div class="border w-80 my-4 text-center py-4">
          <p>Don't have an account?<a class="text-blue-400 font-bold" href="#"> Sign up</a></p>
        </div>

        <p>Get the app</p>

        <div class="flex gap-2 mt-4">
          <img class="h-10" src="./img/microsoft.png" alt="microsoft" />
          <img class="h-10" src="./img/google.png" alt="google" />
        </div>
      </div>

      <!-- footer -->

      <footer class="row-span-1 col-span-2">
        <ul class="flex flex-wrap gap-5 justify-center">
          <li class="text-slate-800 text-sm">Meta</li>
          <li class="text-slate-800 text-sm">About</li>
          <li class="text-slate-800 text-sm">Blog</li>
          <li class="text-slate-800 text-sm">Jobs</li>
          <li class="text-slate-800 text-sm">Help</li>
          <li class="text-slate-800 text-sm">API</li>
          <li class="text-slate-800 text-sm">Privacy</li>
          <li class="text-slate-800 text-sm">Terms</li>
          <li class="text-slate-800 text-sm">Locations</li>
          <li class="text-slate-800 text-sm">Instagram Lite</li>
          <li class="text-slate-800 text-sm">Threads</li>
          <li class="text-slate-800 text-sm">Contact Uploading & Non-Users</li>
          <li>Meta Verified</li>
        </ul>

        <ul class="flex flex-wrap gap-5 justify-center mt-6">
          <li class="text-slate-800">English</li>
          <li class="text-slate-800">© 2024 Instagram from Meta</li>
        </ul>
      </footer>
    </div>
  </body>
</html>

页面左侧主图区域为空，图片完全未显示。

问题根源在于主图容器的类顺序错误：
Tailwind CSS的类优先级遵循后声明的类覆盖先声明的类规则，你给主图容器写的md:flex justify-end hidden中，hidden在最后，会覆盖前面的md:flex，导致无论屏幕尺寸多大，容器都会被隐藏，自然看不到主图。

只需调整类的顺序，把hidden放到md:flex前面，让大屏断点下的md:flex能覆盖默认的hidden：

修改后的主图容器代码：

<!-- Main image-->
<div class="row-span-5 hidden md:flex justify-end">
  <img class="max-w-96" src="./img/insta-img (1).png"/>
</div>

调整后，屏幕宽度≥768px（md断点）时，容器会以flex布局显示主图；小屏幕下则隐藏主图，完全符合Instagram的响应式设计逻辑。

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