Tailwind CSS Avatar - Theme

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

A. The defaultProps object for setting up the default value for props of avatar component.
B. The valid object for customizing the valid values for avatar component props.
C. The styles object for customizing the theme and styles of avatar component.

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

Avatar Theme Object Type

interface AvatarStyleTypes {
  defaultProps: {
    variant: string;
    size: string;
    className: string;
  };
  valid: {
    variants: string[];
    sizes: string[];
  };
  styles: {
    base: object;
    sizes: {
      xs: object;
      sm: object;
      md: object;
      lg: object;
      xl: object;
      xxl: object;
    };
    variants: {
      rounded: object;
      circular: object;
    };
  };
}

For TypeScript Only

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

Avatar Theme Customization

const theme = {
  avatar: {
    styles: {
      base: {
        position: "relative",
      },
    },
  },
};