All carousel images show up in first box.

[adamllryan]

Navigation still works, but is in the top left corner and navigating to images after the first are all just blank space. Arrows also work, but stack above the navigation. All images get squashed into the first frame. Carousel worked for around a day but suddenly stopped working. Initially I thought it was an issue with my setup but I was able to recreate it in a fresh create-react-app project. I managed to fix it by reverting my build but it broke again after waiting a certain time period and then would not unbreak despite reverting all changes.

Issue after reappearing in main project

[adamllryan]

Here is the whole component:

  return (
    <Carousel
      className="rounded-none border border-black h-36 w-48"
      navigation={({ setActiveIndex, activeIndex, length }) => (
        <div className="absolute bottom-4 left-2/4 z-50 flex -translate-x-2/4 gap-2">
          {new Array(length).fill("").map((_, i) => (
            <span
              key={i}
              className={"border block h-1 cursor-pointer rounded-none transition-all content-[''] ${
                activeIndex === i
                  ? "w-8 bg-white border-black"
                  : "w-4 bg-white/50 border-black/50"
              }"}
              onClick={() => setActiveIndex(i)}
            />
          ))}
        </div>
      )}
      prevArrow={({ handlePrev }) => <></>}
      nextArrow={({ handleNext }) => <></>}
    >
      {src.split(";").map((s, index) => {
        return <img src={s} key={index} className="object-scale-down" />;
      })}
    </Carousel>
  );
};

No changes were made between the carousel working and breaking.

[sajadevo]

@adamllryan it seems like a styling issue could you please confirm that where you've used the Carousel is indexed on the tailwind config on the content part.

[girdhariag]

I was facing the same issue. I had to add "./**/@material-tailwind/**/*.{js,ts,jsx,tsx,mdx}" in my tailwind config file so that the material-tailwind inside the node_modules get the access to the tailwind classes.

module.exports = {
	content: [
		"./src/**/*.{html,js,ts,jsx,tsx,mdx}",
		"./**/@material-tailwind/**/*.{html,js,ts,jsx,tsx,mdx}"
	],
	theme: {},
	plugins: [],
};

Not sure if this is the correct way to solve this. Has anyone else fixed this using any other workaround?

[cagkanacarbay]

Same issue here. Anyone have a fix?