本地无法覆盖Nuxt/Tailwind媒体查询CSS问题排查

我想要覆盖 Nuxt UI Pro 的 PageColumns 组件 CSS 媒体查询，在大屏设备上给 <UPageColumns> 元素添加 class="lg:columns-2" 实现2列布局，代码如下：

<UPageColumns class="lg:columns-2">
  <UPageCard v-for="(foo, index) in [1, 2, 3, 4]" :key="index">
    <div>
      Hello
      {{ foo }}
    </div>
  </UPageCard>
</UPageColumns>

本地环境下该设置不生效，但在 StackBlitz 中可正常实现预期的2列布局，暂未发现本地环境与 StackBlitz 的差异。我下载了 Nuxt UI Pro Starter Template，执行npm install后将上述代码粘贴到index.vue中，本地会显示3列而非2列。

有趣的是，本地修改大屏设备的其他列数均可生效，仅lg:columns-2会被lg:columns-3覆盖。两张截图显示应用了完全相同的类，但本地环境中3列样式优先级更高：

更新

该问题似乎是CSS优先级问题，可通过使用[&:]重复选择器的方式缓解，修改后的代码如下：

<UPageColumns class="[&]:lg:columns-2">
  <UPageCard v-for="(foo, index) in [1, 2, 3, 4]" :key="index">
    <div>
      Hello
      {{ foo }}
    </div>
  </UPageCard>
</UPageColumns>

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