I used this code for swiper version 11 with tailwind.

 navigation={{
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    }}

Outside the swiper tag:

  <div className="bg-gray-500 w-28 relative -top-14">
            <div
                className="swiper-button-prev !text-xs !text-grayDarkMe !size-10 rounded-full bg-grayMe !after:text-sm ">
                <MdOutlineKeyboardArrowLeft size={12}/>
            </div>
            <div
                className="swiper-button-next !text-xs !text-grayDarkMe !size-10 rounded-full bg-grayMe !after:text-sm ">
                <MdKeyboardArrowRight size={10}/>
            </div>
        </div>

!after:text-sm means it's important

<Swiper
                    loop={true} pagination={{clickable: true,}}
                    // navigation={true}
                    modules={[Navigation, Pagination]}
                    navigation={{
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    }}
                    slidesPerView={2}
                    breakpoints={{
                        430: {
                            slidesPerView: 3,
                            spaceBetweenSlides: 25
                        },
                        480: {
                            slidesPerView: 4,
                            spaceBetweenSlides: 25
                        },
                        640: {
                            slidesPerView: 4,
                            spaceBetweenSlides: 25
                        },
                        970: {
                            slidesPerView: 5,
                            spaceBetweenSlides: 25
                        },
                        1260: {
                            slidesPerView: 6,
                            spaceBetweenSlides: 30
                        },
                        1530: {
                            slidesPerView: 8,
                            spaceBetween: 10
                        }
                    }}
                    className="  overflow-hidden relative">
                    <SwiperSlide><Brand/></SwiperSlide>
                    <SwiperSlide><Brand/></SwiperSlide>
                    <SwiperSlide><Brand/></SwiperSlide>
                    <SwiperSlide><Brand/></SwiperSlide>
                    <SwiperSlide><Brand/></SwiperSlide>
                    <SwiperSlide><Brand/></SwiperSlide>
                    <SwiperSlide><Brand/></SwiperSlide>
                    <SwiperSlide><Brand/></SwiperSlide>
                    <SwiperSlide><Brand/></SwiperSlide>
                    <SwiperSlide><Brand/></SwiperSlide>
                    <SwiperSlide><Brand/></SwiperSlide>
                    <SwiperSlide><Brand/></SwiperSlide>

                </Swiper>
         <div className="bg-gray-500 w-28 relative -top-14">
            <div
                className="swiper-button-prev !text-xs !text-grayDarkMe 
                !size-10 rounded-full bg-grayMe !after:text-sm ">
                <MdOutlineKeyboardArrowLeft size={12}/>
            </div>
            <div
                className="swiper-button-next !text-xs !text-grayDarkMe 
                !size-10 rounded-full bg-grayMe !after:text-sm ">
                <MdKeyboardArrowRight size={10}/>
            </div>
        </div>