TanStack Router and Swiper JS strange styling behavior

[TomoFromEarth]

I have recently migrated (or am in the process of migrating) from React Router to TanStack router and everything is mostly going just fine. On my home page I have several carousels using the Swiper JS library with some specific styling for sizes and shape of the individual Swiper elements which were working as expected with React Router. When I switched to TS router for some reason the styling of these individual Swiper elements were no longer being respected, even though in dev tools elements tab it shows that the styles are in fact being applied.

Another thing to note is that this is only happening with one of the Swiper modules, I am using a different module on another page and it is working as expected. I have created separate routes away from the index route where my home page component is being rendered and used this Swiper component to see if this was just something with the index route and it still does the same thing.

The thing that is very confusing is that the styles are being applied when running the app in prod but they just aren't actually rendering. I have to be honest I don't really know where to even begin with this since there are no meaningful errors and I feel that it is a skill issue on my part so any help would be truly appreciated. I am happy to provide code snippets and/or screenshots of the way it should look vs. what it looks like now in case that would help anyone.

This is the code for the actual Swiper carousel

import { Swiper, SwiperSlide } from "swiper/react";
import { Pagination, Mousewheel, Keyboard, Navigation } from "swiper/modules";
import { ArtistCard } from "./ArtistCard";
import { ArtistNameOverlay } from "./ArtistNameOverlay";
import { ArtistCardCarouselProps } from "../../types/components";

// Import Swiper styles
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation";

export const ArtistCardCarousel = ({
  artists,
  onCardClick,
  className = "",
  style = {},
  user,
  onAddToDeck,
  isInDeck,
}: ArtistCardCarouselProps) => {
  return (
    <div
      className={`flex w-full items-center justify-center ${className}`}
      style={style}
    >
      <Swiper
        modules={[Pagination, Mousewheel, Keyboard, Navigation]}
        slidesPerView="auto"
        spaceBetween={-30}
        pagination={{
          clickable: true,
        }}
        navigation={{
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        }}
        grabCursor={true}
        loop={true}
        centeredSlides={true}
        mousewheel={{
          forceToAxis: true,
          invert: true,
          sensitivity: 1,
          thresholdDelta: 1,
        }}
        keyboard={true}
        initialSlide={1}
        className="h-full w-full"
      >
        {artists.map((artist) => (
          <SwiperSlide
            key={artist.id}
            className="relative h-artist-card w-artist-card rounded-carousel bg-primary-body/25 p-1 shadow-inner shadow-primary backdrop-blur-sm sm:h-artist-card-sm sm:w-artist-card-sm md:h-artist-card-md md:w-artist-card-md md:rounded-carousel-md md:p-2 lg:h-artist-card-lg lg:w-artist-card-lg lg:rounded-carousel-lg xl:h-artist-card-xl xl:w-artist-card-xl"
          >
            <ArtistCard
              artist={artist}
              onCardClick={onCardClick}
              className="h-full w-full"
              variant="standard"
              user={user}
              onAddToDeck={onAddToDeck}
              isInDeck={isInDeck}
            />

            {/* Artist name overlay */}
            <ArtistNameOverlay artistName={artist.name} />
          </SwiperSlide>
        ))}
        <div className="swiper-button-prev"></div>
        <div className="swiper-button-next"></div>
        <div className="swiper-pagination"></div>
      </Swiper>
    </div>
  );
};

This is how the component is being used in Home.tsx

<div className="my-8">
          <h2 className="mb-6 text-2xl font-bold tracking-tight text-primary dark:text-primary">
            wave 001
          </h2>
          {loading ? (
            // TODO: Replace with loading component
            <div>Loading artists...</div>
          ) : (
            <div className="flex flex-col items-center justify-center">
              <ArtistCardCarousel
                artists={artists.filter((artist) => artist.isCurrentlyFeatured)}
                onCardClick={handleArtistClick}
                className="h-[22rem] w-full md:h-[28rem] lg:h-[34rem]"
                user={userProfile ? { userId: userProfile.userId } : undefined}
                onAddToDeck={addToDeckHandler}
                isInDeck={isInDeck}
              />
            </div>
          )}
        </div>

The rest of the TanStack Router code is pretty much standard boilerplate as the routes aren't actually that complex, We only have a few for now but I am happy to share any of that code as well if someone would like to see it. I appreciate any and all help/guidance...

[schiller-manuel]

can you please provide this as a complete minimal example?