Tailwind CSS Card - Theme

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

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

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



Card Theme Object Type

interface CardStylesType {
  defaultProps: {
    variant: string;
    color: string;
    shadow: boolean;
    className: string;
  };
  valid: {
    variants: string[];
    colors: string[];
  };
  styles: {
    base: {
      initial: object;
      shadow: object;
    };
    variants: {
      filled: object;
      gradient: object;
    };
  };
}


For TypeScript Only

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

Card Theme Customization

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

Card Header Theme Object Type

interface CardHeaderStylesType {
  defaultProps: {
    variant: string;
    color: string;
    shadow: boolean;
    floated: boolean;
    className: string;
  };
  valid: {
    variants: string[];
    colors: string[];
  };
  styles: {
    base: {
      initial: object;
      shadow: object;
      floated: object;
    };
    variants: {
      filled: object;
      gradient: object;
    };
  };
}


For TypeScript Only

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

Card Header Theme Customization

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

Card Body Theme Object Type

interface CardBodyStylesType {
  defaultProps: {
    className: string;
  };
  styles: {
    base: object;
  };
}


For TypeScript Only

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

Card Body Theme Customization

const theme = {
  cardBody: {
    styles: {
      base: {
        p: "p-6",
      },
    },
  },
};

Card Footer Theme Object Type

interface CardFooterStylesType {
  defaultProps: {
    className: string;
    divider: boolean;
  };
  styles: {
    base: {
      initial: object;
      divider: object;
    };
  };
}


For TypeScript Only

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

Card Footer Theme Customization

const theme = {
  cardFooter: {
    styles: {
      base: {
        initial: {
          p: "p-6",
        },
      },
    },
  },
};

Related

Examples

Checkout different examples for card components.

Props

Learn more about props definition and types of card components.

Edit this page on Github