quick-start.mdx

title	description	navigation	github	next
Get Started with Material Tailwind - React & Tailwind CSS Components Library	Learn how to use Material Tailwind components from this documentation to easily create elegant and flexible pages using Tailwind CSS and React.	quick-start installation npm yarn pnpm tailwindcss-config theme-provider example typescript	quick-start	license

Quick Start

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

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.

## Using NPM

Install Material Tailwind as a dependency using NPM by running the following command:

npm i @material-tailwind/react

---

Using Yarn

Or use Yarn:

yarn add @material-tailwind/react

---

Using PNPM

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.

const withMT = require("@material-tailwind/react/utils/withMT");

module.exports = withMT({
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {}
  },
  plugins: []
});

---

Theme Provider

@material-tailwind/react is comes with a theme provider that you can use to provide your own theme to your components. You need to wrap your entire application with the ThemeProvider coming from @material-tailwind/react.

import React from "react";
import ReactDOM from "react-dom";
import App from "App";
import { ThemeProvider } from "@material-tailwind/react";

ReactDOM.render(
  <ThemeProvider>
    <App />
  </ThemeProvider>,
  document.getElementById("root")
);

---

Example

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

Button

import { Button } from "@material-tailwind/react";

export default function Example() {
  return <Button>Button</Button>;
}

---

TypeScript

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