twailwindcss 媒体查询在同一应用程序的 aws ec2 和 vercel 上的工作方式不同

Question

class="p-2 flex justify-center flex-col lg:flex-row gap-2"

Vercel 的输出

aws ec2 的输出

与 vercel 部署完美配合

Answer 1

flex-col

和

lg:flex-row

具有相同的特异性，因此优先级取决于样式表中稍后出现的样式表（由 tailwind 动态生成）。

虽然我不知道为什么您的两个不同的部署会生成不同的样式表，但一个快速解决方法是将

flex-col

替换为

max-lg:flex-col

以保证

flex-col

不会应用于下一个断点。