Tailwind CSS List - Theme

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

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

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

List Theme Object Type

interface ListStylesType {
  defaultProps: {
    ripple: boolean;
    className: string;
  };
  styles: {
    base: {
      list: object;
      item: {
        initial: object;
        selected: object;
        disabled: object;
      };
      itemPrefix: object;
      itemSuffix: object;
    };
  };
}

For TypeScript Only

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

List Theme Customization

const theme = {
  list: {
    styles: {
      base: {
        list: {
          bg: "bg-white",
        },
      },
    },
  },
};