0

Is there any way to access the swiper classes in tailwind?

This is what the code on the page looks like:

<div class='swoper-wraper'>
  <li class='swiper-slide swiper-slide-visible swiper-slide-active'></li>
  <li class='swiper-slide swiper-slide-visible'></li>
  <li class='swiper-slide swiper-slide swiper-slide-visible swiper-slide-thumb-active'></li>
</div>

swiper code:

<div className='swiper-container'>
 <Swiper
   className='[&_swiper-slide]:opacity-70' //doesn't work
   modules={[Thumbs]}
   watchSlidesProgress={true}
   onSwiper={setThumbsSwiper}
 >
      //slides
 </Swiper>
</div>

I can't get access to swiper classes - swiper-slide swiper-slide-visible swiper-slide-active

 [&_swiper-slide]:opacity-70, [&>swiper-slide]:opacity-70 - doesn't work
 [&_li]:opacity-70 - work,

but i need swiper classes swiper-slide-active and swiper-slide-thumb-active

UPD: I also found that the file 'swiper/css/thumbs' is empty, there should be styles that I need. (

Lex2000
  • 155
  • 1
  • 1
  • 12

1 Answers1

0

you can try using @apply to access the swipper class

.swiper-slide-active{
@apply opacity-70
}

for more information https://tailwindcss.com/docs/reusing-styles#extracting-classes-with-apply

Feis
  • 51
  • 3
  • Thank you. I tried it, it doesn't work. – Lex2000 Oct 27 '22 at 09:51
  • @Lex2000 it does work but you most likely need to add !important: ``` .swiper-slide-active{ @apply opacity-70 } ``` Or change the order of including your CSS files. – Maarten Ureel Jul 02 '23 at 13:06
  • It worked in app.css of Laravel + Vue stack. Remember to declare :after pseudo classes for items like navigation buttons. – Melih Jul 10 '23 at 18:43