Style order issue when using unocss in nuxt-swiper

[lxccc812]

application:

<Swiper
    :modules="[]"
    :slides-per-view="'auto'"
    :grab-cursor="true"
    :free-mode="true"
    class="w-[calc(100%-20px)] overflow-hidden rd-2.5 py-2.5"
>
    <SwiperSlide v-for="item in screenshots" :key="item.id" class="mr-2 w-a last:mr-0">
        <img
            :src="item.imgSrc"
            class="h-62.5 w-a rd-2.5 bg-[#00000066]"
        />
    </SwiperSlide>
</Swiper>

local:

after build: As a result, the style cannot be displayed as expected.

nuxt-swiper 1.2.2 @unocss/nuxt 0.57.1

Solution Add !important

[cpreston321]

I would use the @apply directive within unocss. This way you can target the swiper-class within the css that can overwrite the default styles. https://unocss.dev/transformers/directives#usage or you can use the unocss important modifier !py.-2.5

[lxccc812]

yeah , ! is right