@material-tailwind/react is an easy-to-use components library for ReactJS & Tailwind CSS inspired by Material Design.
npm install @makeit-sg/material-reactVisit https://www.material-tailwind.com/docs/react/installation for full documentation.
Learn how to use @material-tailwind/react components 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.
1. Intall @material-tailwind/react.
``bash`
npm i @material-tailwind/react
2. Once you install @material-tailwind/react you need to wrap your tailwind css configurations with the withMT() function coming from @material-tailwind/react/utils.
`js
const withMT = require("@material-tailwind/react/utils/withMT");
module.exports = withMT({
content: ["./src/*/.{js,jsx,ts,tsx}"],
theme: {
extend: {},
},
plugins: [],
});
`
3. @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.
`jsx
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
// @material-tailwind/react
import { ThemeProvider } from "@material-tailwind/react";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
);
`
4. Congratulations 🥳, you did it, now you're ready to use @material-tailwind/react.
`jsx
import { Button } from "@material-tailwind/react";
export default function Example() {
return ;
}
`
We're excited to see the community adopt Material Tailwind, raise issues, and provide feedback.
Whether it's a feature request, bug report, or a project to showcase, please get involved!
- Discord
Contributions are always welcome!
See CONTRIBUTING.md for ways to get started.
Please adhere to this project's CODE_OF_CONDUCT.md`.