Tailwind CSS Carousel - Theme

Learn how to customize the theme and styles for carousel component, the theme object for carousel component has two main objects:

A. The defaultProps object for setting up the default value for props of carousel component.
B. The styles object for customizing the theme and styles of carousel component.

You can customize the theme and styles of carousel component by adding Tailwind CSS classes as key paired values for objects.



Carousel Theme Object Type

interface CarouselStylesType {
  defaultProps: {
    prevArrow: (args: {
      loop: boolean;
      handlePrev: () => void;
      activeIndex: number;
      firstIndex: boolean;
    }) => React.ReactNode | void;
    nextArrow: (args: {
      loop: boolean;
      handleNext: () => void;
      activeIndex: number;
      lastIndex: boolean;
    }) => React.ReactNode | void;
    navigation: (args: {
      setActiveIndex: React.Dispatch<React.SetStateAction<number>>;
      activeIndex: number;
      length: number;
    }) => React.ReactNode | void;
    transition: object;
    autoplay: boolean;
    autoplayDelay: number;
    loop: boolean;
    className: string;
  };
  styles: {
    base: {
      carousel: object;
      slide: object;
    };
  };
}


For TypeScript Only

import { CarouselStylesType } from "@material-tailwind/react";

Carousel Theme Customization

const theme = {
  carousel: {
    styles: {
      base: {
        carousel: {
          display: "flex",
        }
        slide: {
          border: "border-2",
          borderColor: "border-blue-500"
        }
      },
    },
  },
};
Edit this page on Github