Material Tailwind with Vite

Learn how to setup and install @material-tailwind/react with Vite (React).



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

Theme Provider

@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/main.js or src/main.tsx if you're using typescript 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";
 
ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <ThemeProvider>
      <App />
    </ThemeProvider>
  </React.StrictMode>
);

Example

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>;
}
Edit this page on Github