Get Started with Material Tailwind

Material Tailwind is a free and open-source components library for ReactJS and Tailwind CSS inspired by Material Design.

Learn how to use @material-tailwind/react components from this documentation to quickly and easily create elegant and flexible pages using Tailwind CSS.

@material-tailwind/react is working with Tailwind CSS classes and you need to have Tailwind CSS installed on your project - Tailwind CSS Installation Guide.

Using NPM

Install @material-tailwind/react as a dependency using NPM by running the following command:

npm i @material-tailwind/react

Using Yarn

Install @material-tailwind/react as a dependency using Yarn by running the following command:

yarn add @material-tailwind/react

Using PNPM

Install @material-tailwind/react as a dependency using PNPM by running the following command:

pnpm i @material-tailwind/react

TailwindCSS Configurations

Once you install @material-tailwind/react you need to wrap your tailwind css configurations with the withMT() function coming from @material-tailwind/react/utils.

const withMT = require("@material-tailwind/react/utils/withMT");
 
module.exports = withMT({
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
});

For more guides on how to use @material-tailwind/react with different frameworks, check the Frameworks Integration section.

Framework-specific guides that cover our recommended approach to installing @material-tailwind/react in a number of popular environments. Select your preferred framework from the list below and follow the instructions.

@material-tailwind/react is a TypeScript based components library and you can easily use it in your TypeScript based projects.