Tailwind CSS Card - Theme

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

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

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



Tabs Theme Object Type

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


For TypeScript Only

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

Tabs Theme Customization

const theme = {
  tabs: {
    styles: {
      base: {
        display: "block",
        overflow: "overflow-hidden",
      },
    },
  },
};

Tabs Header Theme Object Type

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


For TypeScript Only

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

Tabs Header Theme Customization

const theme = {
  tabsHeader: {
    styles: {
      base: {
        display: "flex",
        position: "relative",
      },
    },
  },
};

Tabs Body Theme Object Type

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


For TypeScript Only

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

Tabs Body Theme Customization

const theme = {
  tabsBody: {
    styles: {
      base: {
        display: "block",
        width: "w-full",
      },
    },
  },
};

Tab Theme Object Type

interface TabStylesType {
  defaultProps: {
    className: string;
    disabled: boolean;
  };
  styles: {
    base: {
      tab: {
        initial: object;
        disabled: object;
      };
      indicator: object;
    };
  };
}


For TypeScript Only

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

Tab Theme Customization

const theme = {
  tab: {
    styles: {
      base: {
        tab: {
          initial: {
            display: "grid",
            placeItems: "place-items-center",
          },
          disabled: {
            opacity: "opacity-50",
            cursor: "cursor-not-allowed",
          },
        },
      },
    },
  },
};

Tab Panel Theme Object Type

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


For TypeScript Only

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

Tab Panel Theme Customization

const theme = {
  tabPanel: {
    styles: {
      base: {
        width: "w-full",
        height: "h-max",
      },
    },
  },
};

Related

Examples

Checkout different examples for tabs components.

Props

Learn more about props definition and types of tabs components.

Edit this page on Github