How can I centralize Swiper pagination styling using Tailwind?

[Nefcanto]

We want to use Swiper in our Next.js application, but we want to customize the pagination.

We have two ways. The first way is to have global or module-level CSS files:

.swiper-pagination-bullet-active {
    background: red;
    width: 12px;
    border-radius: 5px;
}

Yet because we're using Tailwind, having two different approaching for styling is not clean. So, we decided to use Tailwind to style it.

We use this code:

<div class="swiper-pagination [&_.swiper-pagination-bullet-active]:bg-red-900
    [&_.swiper-pagination-bullet-active]:w-5 
    [&_.swiper-pagination-bullet-active]:rounded-md  
    absolute z-30 w-full bottom-0"></div>

But as you can see, it's not readable. Look at that [&_.swiper-pagination-bullet-active] selector.

So we decided to create a wrapper component for our Swiper needs and pass some parameters to it. This is our component usage:

<Swiper
    activePage="bg-red-900"
>
    { slides.map(i => <div></div> }
</Swiper>

While this approach is very clean and readable, it won't work because dynamically generating classes is not supported in Tailwind. In other words, we can't concat bg-red-900 and [&_.swiper-pagination-bullet-active] on the fly and expect it to work. The entire [&_.swiper-pagination-bullet-active]:bg-red-900 should be there in order to be picked up by Tailwind JIT compiler.

Is there another way that we are not aware of for this purpose? Do we have any options in tailwind.config.js to allow the creation of this clean SwiperWrapper component?

[wongjn]

If you don't like the look of the [&_.swiper-pagination-bullet-active] arbitrary variant, you could abstract it into a static variant via a Tailwind Plugin.

You could also consider adding the Tailwind classes to the pagination.bulletActiveClass option to avoid having to use a variant at all.

[Nefcanto]

@wongjn that plugin approach worked like a charm. now we have active-bullet:bg-red-400 and that active-bullet is a static variant. I love Tailwind.

[porobertdev]

I went with this approach: https://stackoverflow.com/a/74216206

.swiper-pagination-bullet {
    @apply bg-card-foreground;
}
.swiper-pagination-bullet-active {
  @apply bg-foreground;
}