Repository files navigation

Visithttps://www.material-tailwind.com/docs/react/installation for full documentation.

Accordion	Alert	Avatar
Breadcrumbs	Button	Card
Checkbox	Chip	Dialog
Icon Button	Input	Menu
Navbar	Popover	Progress Bar
Radio Button	Select	Switch
Tabs	Textarea	Tooltip
Typography

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.

npm i @material-tailwind/react

2. Once you install @material-tailwind/react you need to wrap your tailwind css configurations with thewithMT() function coming from @material-tailwind/react/utils.

constwithMT=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 theThemeProvider coming from @material-tailwind/react.

importReactfrom"react";importReactDOMfrom"react-dom/client";importAppfrom"./App";//@material-tailwind/reactimport{ThemeProvider}from"@material-tailwind/react";constroot=ReactDOM.createRoot(document.getElementById("root"));root.render(<React.StrictMode><ThemeProvider><App/></ThemeProvider></React.StrictMode>,);

4. Congratulations 🥳, you did it, now you're ready to use @material-tailwind/react.

import{Button}from"@material-tailwind/react";exportdefaultfunctionExample(){return<Button>Button</Button>;}

Visithttps://www.material-tailwind.com/docs/html/installation for full documentation.

Accordion	Alert	Avatar
Breadcrumbs	Button	Card
Checkbox	Chip	Dialog
Icon Button	Input	Menu
Navbar	Pagination	Popover
Progress Bar	Radio Button	Select
Switch	Tabs	Textarea
Tooltip	Typography

Learn how to use @material-tailwind/html components to quickly and easily create elegant and flexible pages using Tailwind CSS.

@material-tailwind/html is working with Tailwind CSS classes and you need to have Tailwind CSS installed on your project -Tailwind CSS Installation.

1. Intall@material-tailwind/html

npm i @material-tailwind/html

2. Once you install @material-tailwind/html you need to wrap your tailwind css configurations with thewithMT() function coming from @material-tailwind/html/utils.

constwithMT=require("@material-tailwind/html/utils/withMT");module.exports=withMT({content:["./index.html"],theme:{extend:{},},plugins:[],});

4. Congratulations 🥳, you did it, now you're ready to use @material-tailwind/html.

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!

SeeCONTRIBUTING.md for ways to get started.

Please adhere to this project'sCODE_OF_CONDUCT.md.

MIT