css - Vuejs3 md 上的 Tailwind：类覆盖移动头等舱

Question

我想将填充从移动设备上的 px6 更改为 px8 到大于 768px 的任何东西。所以我使用“md:px-8”。但是，当屏幕宽度小于 768 像素时，这似乎会覆盖移动行为？基本上 px-6 永远不会被应用。有没有人经历过/解决过这个问题？谢谢。

在我总是可以看到的开发工具上（更少或更多 768px）

@media (min-width: 768px)
.md\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
}
and below:
.px-6 {
    padding-left: 1.5rem; <--- overriden (line in middle)
    padding-right: 1.5rem; <--- overriden (line in middle)
}

• 我在 Chrome、Safari、Firefox 上试过。
• 我有 meta name="viewport"
  content="width=device-width,initial-scale=1.0" 头
• 除响应能力外，所有课程都有效。

<template>
  <div class="flex flex-wrap flex-row">
    <div class="w-1/5 max-w-xs"></div>
    <div id="nav" class="bg-gray-900 w-1/5 max-w-xs h-screen px-6 py-8 md:px-8 fixed">
    <Navigation/
    </div>
    <div id="content" class="w-4/5 px-6 py-8 md:px-8">
      <router-view/>
    </div>
  </div>
</template>

标签： csstailwind-cssvuejs3