Material Tailwind with Next.js

Learn how to setup and install @material-tailwind/react with Next.js.

First you need to create a new project using next.js, for more details check the Next.JS Official Documentation

npx create-next-app@latest

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 next.js 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 on the tailwind.config.js file.

const withMT = require("@material-tailwind/react/utils/withMT");
 
module.exports = withMT({
  content: ["./pages/**/*.{js,ts,jsx,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: [
    "./pages/**/*.{js,ts,jsx,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: [],
});

If you want to use @material-tailwind/react with Next.js 13 appDir feature you need to make use of the
'use client' to makes it possible a simple approach is to make a new export file for the components you want to use from @material-tailwind/react

"use client";
 
import { ThemeProvider, Button } from "@material-tailwind/react";
 
export { ThemeProvider, Button };

Once you've created the export file for the components now you need to import the components you want to use from that new created file rather than @material-tailwind/react.

// ❌ invalid - this is not working with server components
import { Button } from "@material-tailwind/react";
 
// ✅ valid - this will work fine with server components
import { Button } from "path/to/the/new/file";

@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 pages/_app put the code bellow.

import "/styles/globals.css";
 
import { ThemeProvider } from "@material-tailwind/react";
 
export default function MyApp({ Component, pageProps }) {
  return (
    <ThemeProvider>
      <Component {...pageProps} />
    </ThemeProvider>
  );
}

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>;
}