Material Tailwind with CRA

Learn how to setup and install @material-tailwind/react with Create React App.

First you need to create a new project using create react app, for more details check the Create React App Official Documentation

npx create-react-app my-app

Then you need to install Tailwind CSS since @material-tailwind/react is working with Tailwind CSS classes and you need to have Tailwind CSS installed on your project. Check Tailwind CSS Installation for create react app on Tailwind CSS Documentation.

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

npm i @material-tailwind/react

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

yarn add @material-tailwind/react

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

pnpm i @material-tailwind/react

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: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
});

If you're using monorepo in your project you need to add the theme and components paths to your tailwind.config.js.

const withMT = require("@material-tailwind/react/utils/withMT");
 
module.exports = withMT({
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
    "path-to-your-node_modules/@material-tailwind/react/components/**/*.{js,ts,jsx,tsx}",
    "path-to-your-node_modules/@material-tailwind/react/theme/components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
});

@material-tailwind/react comes with a theme provider that set's the default theme/styles for components or to provide your own theme/styles to your components. You need to wrap your entire application with the ThemeProvider coming from @material-tailwind/react.

On the src/index put the code bellow.

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "./index.css";
 
import { ThemeProvider } from "@material-tailwind/react";
 
const root = ReactDOM.createRoot(document.getElementById("root"));
 
root.render(
  <React.StrictMode>
    <ThemeProvider>
      <App />
    </ThemeProvider>
  </React.StrictMode>
);

Now you're good to go and use @material-tailwind/react in your project.

import { Button } from "@material-tailwind/react";
 
export default function Example() {
  return <Button>Button</Button>;
}