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 the 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 themeObject = {
  componentTheme = {
    defaultProps: { ... },
    valid: { ... },
    styles: { ... }
  }
}


KeyDescription
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 override the classnames for a component.

e.g. !text-blue-500

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