Material Tailwind is 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.
Install Material Tailwind as a dependency using NPM by running the following command:
npm i @material-tailwind/react
Or use Yarn:
yarn add @material-tailwind/react
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.
const withMT = require("@material-tailwind/react/utils/withMT");
module.exports = withMT({
content: ["./src/**/*.{js,jsx,ts,tsx}"],
theme: {
extend: {}
},
plugins: []
});
@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")
);
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>;
}
@material-tailwind/react is a TypeScript based components library and you can easily use it in your TypeScript based projects.
Edit this page on Github