Overriding nuxt/tailwind media-query css not working locally

I want to override a css media-query from NuxtUiPro PageColumns: on large-screens I am trying to achieve a 2-col layout by adding class="lg:column-2" to the UPageColums element.

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

Locally this does not work. I tried to replicate the behavior on StackBlitz but cannot reproduce the issue there (instead I get the desired 2-col layout). At this point I do not see the difference between my local setup and the StackBlitz.

I downloaded the NuxtUiPro StarteTemplate, did an npm -i and pasted the code above in index.vue. You should get three instead of two columns locally.

Interestingly when I change to any other column-count for lg-screens locally I get the desired result. Only lg:columns-2 is getting overriden by lg:columns-3.

Two screenshots that show that the exact same classes have been applied but locally the three columns win over the two-columns.

Update

Seems to be a specificity issue, than can be mitigated by using the [&] to repeat the selector <UPageColumns class="[&]:lg:columns-2">.

Try refactor your code into something like this. Unlike the above, this one should respect the class definition.

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

or if the above code didn't work, you could simply add ! to it

lg:!columns-2