Tailwind CSS Chip - Theme

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

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

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

Chip Theme Object Type

interface ChipStylesType {
  defaultProps: {
    variant: string;
    color: string;
    icon: node;
    show: boolean;
    dismissble: {
      action: node;
      onClose: func;
    animate: {
      mount: object;
      unmount: object;
    className: string;
  valid: {
    variants: string[];
    colors: string[];
  styles: {
    base: object;
    variants: {
      filled: object;
      gradient: object;
    closeButtonColor: object;

For TypeScript Only

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

Chip Theme Customization

const theme = {
  chip: {
    styles: {
      base: {
        position: "relative",
Edit this page on Github