Theming - Material Tailwind

Customize @material-tailwind/react with your own theme. You can change the base styles like the colors, typography, box-shadows and breakpoints as well as the components style.

@material-tailwind/react come's with a ThemeProvider component that you can use to set your own theme or use the default theme provided by @material-tailwind/react.



Theme Provider

The ThemeProvider component give you the ability to use and customize the default theme or set your own theme for @material-tailwind/react.

You need to wrap your component or entire application with the ThemeProvider component to use the theme.

import { ThemeProvider } from "@material-tailwind/react";
 
export default function App() {
  const customTheme = { ... }
 
  return <ThemeProvider value={customTheme}>...</ThemeProvider>;
}

Theme Provider Props

The following props are available for ThemeProvider.

AttributeTypeDescriptionDefault
valueobjectCustomize the components theme@material-tailwind/react default theme
childrennodeThe component that should be wrappedNo default value it's a required prop.

Theme Object Structure

The theme object is a plain object that contains all of the components styles object. All of the components styles are available in the theme object and these styles object has a unique format for different use cases.

const theme = {
  component: {
    defaultProps: { ... },
    valid: { ... },
    styles: { ... }
  }
}


KeyDescription
themeIt's the main theme object that should be passed as value for the ThemeProvider.
componentIt's the name of component that you want to customize. e.g button.
defaultPropsIs used to change the default props value for components.
validIs used to change the valid values for components props validation.
stylesIs used to change the styles of a component.


To know more about how to customize the component theme object for a specific component please check the component documentation page.

The className Prop

Each component has a className prop that you can use to add tailwindcss classnames or your own custom classnames.

The className prop overrides the tailwindcss classnames for a component and sometimes you need to use the ! modifier before the tailwindcss classnames to mark the classname as important override it over the other classnames.

e.g. !text-blue-500

import { Button } from "@material-tailwind/react";
 
export default function Example() {
  return <Button className="!px-8 uppercase">Button</Button>;
}