Tailwind CSS Collapse - Theme

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

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

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

Collapse Theme Object Type

interface CollapseStylesType {
  defaultProps: {
    animate: {
      mount: object;
      unmount: object;
    };
    className: string;
  };
  styles: {
    base: object;
  };
}

For TypeScript Only

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

Collapse Theme Customization

const theme = {
  collapse: {
    styles: {
      base: {
        backgroundColor: "bg-white",
        borderRadius: "rounded-lg",
      },
    },
  },
};