Next JS Build Swiper JS Issue with Tailwind CSS

user_12669145 0
Viewed 5058

I set a project with NextJS, Tailwind CSS and Swiper JS.

When I run Yarn Dev I can successfully display my Swiper Slider without any error

enter image description here

However, once I built the project and run Start I am facing a broken slider with no navigation but I can still swipe but I get a blank

enter image description here

To reproduce just set a NextJS project with Tailwind config and Swiper slider. Create a file in pages folder with this samples code

// import Swiper core and required modules
import SwiperCore, { Navigation, Pagination, Scrollbar, A11y } from 'swiper'
import Layout from '@modules/Layout'

import { Swiper, SwiperSlide } from 'swiper/react'

// install Swiper modules
SwiperCore.use([Navigation, Pagination, Scrollbar, A11y])

const Slider = () => {
  return (
      <div className='container'>
        <Swiper
          spaceBetween={50}
          slidesPerView={1}
          navigation
          pagination={{ clickable: true }}
          onSwiper={(swiper) => console.log(swiper)}
          onSlideChange={() => console.log('slide change')}
        >
          <SwiperSlide>
            <div className='h-96 w-50 bg-red'>Slide 1</div>
          </SwiperSlide>
          <SwiperSlide>
            <div className='h-96 w-50 bg-blue'>Slide 2</div>
          </SwiperSlide>
          <SwiperSlide>
            <div className='h-96 w-50 bg-orange'>Slide 3</div>
          </SwiperSlide>
          <SwiperSlide>
            <div className='h-96 w-50 bg-green'>Slide 4</div>
          </SwiperSlide>
        </Swiper>
      </div>
  )
}

export default Slider
  • Swiper Version: 6.5.6.
  • Platform/Target and Browser Versions: CHROME
swiper.js tailwind-css next.js reactjs build
2 Answers

I encountered the very same problem using react-swiper with NextJS. I assume the issue is caused by some tree shaking at bundling time that excludes swiper components CSS files since they are not imported in the swiper module (very "random" guessing here since my knowledge on Webpack tree shaking is very basic).

However, I solved the problem by importing swiper .less files into a custom .less file in my project (so they are bundled and minified at build time), then importing the latest .less file into my component file.

Following a code sample

/* custom-swiper.less */
@import "~swiper/swiper.less";
@import "~swiper/components/navigation/navigation.less";
@import "~swiper/components/pagination/pagination.less";

/*
 * my swiper style overrides below
 */
...
user_42505870

I had the same issue and fixed it with cdn import of css in the head html element and using swiper/react to import I am using react with nextjs and typescript and tailwind

In appropriate place- I put in the _document.jsx

       <Head>
          <link
            rel="stylesheet"
            href="https://unpkg.com/swiper@7/swiper-bundle.min.css"
          />          
        </Head>

Usage of <Swiper> and <SwiperSlide>

import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';
import 'swiper/css/pagination';
import 'swiper/css/navigation';

// import Swiper core and required modules
import SwiperCore, { Pagination, Navigation } from 'swiper';

// install Swiper modules
SwiperCore.use([Pagination, Navigation]);
user_28662100
Related