Tailwind CSS Dialog - Theme

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

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

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



Dialog Theme Object Type

interface DialogStylesType {
  defaultProps: {
    size: string;
    dismiss: {
      enabled: boolean;
      escapeKey: boolean;
      referencePointerDown: boolean;
      outsidePointerDown: boolean;
      ancestorScroll: boolean;
      bubbles: boolean;
    };
    animate: {
      mount: object;
      unmount: object;
    };
    className: string;
  };
  valid: {
    sizes: string[];
  };
  styles: {
    base: {
      backdrop: object;
      container: object;
    };
    sizes: {
      xs: object;
      sm: object;
      md: object;
      lg: object;
      xl: object;
      xxl: object;
    };
  };
}


For TypeScript Only

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

Dialog Theme Customization

const theme = {
  dialog: {
    styles: {
      sizes: {
        xs: {
          width: "w-1/4",
          minWidth: "min-w-[25%]",
          maxWidth: "max-w-[25%]",
        },
      },
    },
  },
};

Dialog Header Theme Object Type

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


For TypeScript Only

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

Dialog Header Theme Customization

const theme = {
  dialogHeader: {
    styles: {
      base: {
        display: "flex",
        alignItems: "items-center",
      },
    },
  },
};

Dialog Body Theme Object Type

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


For TypeScript Only

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

Dialog Body Theme Customization

const theme = {
  dialogBody: {
    styles: {
      base: {
        divider: {
          borderTop: "border-t",
          borderBottom: "border-b",
        },
      },
    },
  },
};

Dialog Footer Theme Object Type

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


For TypeScript Only

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

Dialog Footer Theme Customization

const theme = {
  dialogFooter: {
    styles: {
      base: {
        display: "flex",
        alignItems: "items-center",
        justifyContent: "justify-end",
      },
    },
  },
};

Related

Examples

Checkout different examples for dialog components.

Props

Learn more about props definition and types of dialog components.

Edit this page on Github