@material-tailwind/html
Version:
@material-tailwind/html is an easy-to-use components library for Tailwind CSS inspired by Material Design.
259 lines (229 loc) • 9.03 kB
Markdown
<a href="https://www.material-tailwind.com">
<img width="100%" src="https://www.material-tailwind.com/img/material-tailwind-thumbnail.jpg" alt="material-tailwind" style="border-radius: 24px" />
<h1 align="center">Material Tailwind</h1>
</a>
</br>
<p align="center">
<a href="https://www.npmjs.com/package/@material-tailwind/html">
<img src="https://img.shields.io/npm/dt/@material-tailwind/html.svg" alt="Total Downloads">
</a>
<a href="https://github.com/creativetimofficial/material-tailwind/releases">
<img src="https://img.shields.io/badge/version-2.0.0-blue.svg" alt="Version" />
</a>
<a href="https://www.material-tailwind.com/docs/html/license">
<img src="https://img.shields.io/badge/license-MIT-blue" alt="Licenese">
</a>
</p>
<br />
<br />
## Documentation
Visit <a href="https://www.material-tailwind.com/docs/html/installation">https://www.material-tailwind.com/docs/html/installation</a> for full documentation.
<br />
## Components
<table>
<tr>
<td width="33.3333%">Accordion</td>
<td width="33.3333%">Alert</td>
<td width="33.3333%">Avatar</td>
</tr>
<tr>
<td width="33.3333%" style="padding: 0;">
<a href="https://www.material-tailwind.com/docs/html/accordion">
<img alt="accordion" src="https://www.material-tailwind.com/img/html-thumbnails/accordion.jpg">
</a>
</td>
<td width="33.3333%" style="padding: 0;">
<a href="https://www.material-tailwind.com/docs/html/alert">
<img alt="alert" src="https://www.material-tailwind.com/img/html-thumbnails/alert.jpg">
</a>
</td>
<td width="33.3333%" style="padding: 0;">
<a href="https://www.material-tailwind.com/docs/html/avatar">
<img alt="avatar" src="https://www.material-tailwind.com/img/html-thumbnails/avatar.jpg">
</a>
</td>
</tr>
<tr>
<td width="33.3333%">Breadcrumbs</td>
<td width="33.3333%">Button</td>
<td width="33.3333%">Card</td>
</tr>
<tr>
<td width="33.3333%" style="padding: 0;">
<a href="https://www.material-tailwind.com/docs/html/breadcrumbs">
<img alt="breadcrumbs" src="https://www.material-tailwind.com/img/html-thumbnails/breadcrumbs.jpg">
</a>
</td>
<td width="33.3333%" style="padding: 0;">
<a href="https://www.material-tailwind.com/docs/html/button">
<img alt="button" src="https://www.material-tailwind.com/img/html-thumbnails/button.jpg">
</a>
</td>
<td width="33.3333%" style="padding: 0;">
<a href="https://www.material-tailwind.com/docs/html/card">
<img alt="card" src="https://www.material-tailwind.com/img/html-thumbnails/card.jpg">
</a>
</td>
</tr>
<tr>
<td width="33.3333%">Checkbox</td>
<td width="33.3333%">Chip</td>
<td width="33.3333%">Dialog</td>
</tr>
<tr>
<td width="33.3333%" style="padding: 0;">
<a href="https://www.material-tailwind.com/docs/html/checkbox">
<img alt="checkbox" src="https://www.material-tailwind.com/img/html-thumbnails/checkbox.jpg">
</a>
</td>
<td width="33.3333%" style="padding: 0;">
<a href="https://www.material-tailwind.com/docs/html/chip">
<img alt="chip" src="https://www.material-tailwind.com/img/html-thumbnails/chip.jpg">
</a>
</td>
<td width="33.3333%" style="padding: 0;">
<a href="https://www.material-tailwind.com/docs/html/dialog">
<img alt="dialog" src="https://www.material-tailwind.com/img/html-thumbnails/dialog.jpg">
</a>
</td>
</tr>
<tr>
<td width="33.3333%">Icon Button</td>
<td width="33.3333%">Input</td>
<td width="33.3333%">Menu</td>
</tr>
<tr>
<td width="33.3333%" style="padding: 0;">
<a href="https://www.material-tailwind.com/docs/html/icon-button">
<img alt="icon-button" src="https://www.material-tailwind.com/img/html-thumbnails/icon-button.jpg">
</a>
</td>
<td width="33.3333%" style="padding: 0;">
<a href="https://www.material-tailwind.com/docs/html/input">
<img alt="input" src="https://www.material-tailwind.com/img/html-thumbnails/input.jpg">
</a>
</td>
<td width="33.3333%" style="padding: 0;">
<a href="https://www.material-tailwind.com/docs/html/menu">
<img alt="menu" src="https://www.material-tailwind.com/img/html-thumbnails/menu.jpg">
</a>
</td>
</tr>
<tr>
<td width="33.3333%">Navbar</td>
<td width="33.3333%">Pagination</td>
<td width="33.3333%">Popover</td>
</tr>
<tr>
<td width="33.3333%" style="padding: 0;">
<a href="https://www.material-tailwind.com/docs/html/navbar">
<img alt="navbar" src="https://www.material-tailwind.com/img/html-thumbnails/navbar.jpg">
</a>
</td>
<td width="33.3333%" style="padding: 0;">
<a href="https://www.material-tailwind.com/docs/html/pagination">
<img alt="pagination" src="https://www.material-tailwind.com/img/html-thumbnails/pagination.jpg">
</a>
</td>
<td width="33.3333%" style="padding: 0;">
<a href="https://www.material-tailwind.com/docs/html/popover">
<img alt="popover" src="https://www.material-tailwind.com/img/html-thumbnails/popover.jpg">
</a>
</td>
</tr>
<tr>
<td width="33.3333%">Progress Bar</td>
<td width="33.3333%">Radio Button</td>
<td width="33.3333%">Select</td>
</tr>
<tr>
<td width="33.3333%" style="padding: 0;">
<a href="https://www.material-tailwind.com/docs/html/radio-button">
<img alt="radio-button" src="https://www.material-tailwind.com/img/html-thumbnails/radio-button.jpg">
</a>
</td>
<td width="33.3333%" style="padding: 0;">
<a href="https://www.material-tailwind.com/docs/html/select">
<img alt="select" src="https://www.material-tailwind.com/img/html-thumbnails/select.jpg">
</a>
</td>
<td width="33.3333%" style="padding: 0;">
<a href="https://www.material-tailwind.com/docs/html/progress-bar">
<img alt="progress-bar" src="https://www.material-tailwind.com/img/html-thumbnails/progress-bar.jpg">
</a>
</td>
</tr>
<tr>
<td width="33.3333%">Switch</td>
<td width="33.3333%">Tabs</td>
<td width="33.3333%">Textarea</td>
</tr>
<tr>
<td width="33.3333%" style="padding: 0;">
<a href="https://www.material-tailwind.com/docs/html/tabs">
<img alt="tabs" src="https://www.material-tailwind.com/img/html-thumbnails/tabs.jpg">
</a>
</td>
<td width="33.3333%" style="padding: 0;">
<a href="https://www.material-tailwind.com/docs/html/textarea">
<img alt="textarea" src="https://www.material-tailwind.com/img/html-thumbnails/text-area.jpg">
</a>
</td>
<td width="33.3333%" style="padding: 0;">
<a href="https://www.material-tailwind.com/docs/html/switch">
<img alt="switch" src="https://www.material-tailwind.com/img/html-thumbnails/switch.jpg">
</a>
</td>
</tr>
<tr>
<td width="33.3333%">Tooltip</td>
<td width="33.3333%">Typography</td>
</tr>
<tr>
<td width="33.3333%" style="padding: 0;">
<a href="https://www.material-tailwind.com/docs/html/typography">
<img alt="typography" src="https://www.material-tailwind.com/img/html-thumbnails/typography.jpg">
</a>
</td>
<td width="33.3333%" style="padding: 0;">
<a href="https://www.material-tailwind.com/docs/html/tooltip">
<img alt="tooltip" src="https://www.material-tailwind.com/img/html-thumbnails/tooltip.jpg">
</a>
</td>
</tr>
</table>
<br />
## Getting Started
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 - <a href="https://tailwindcss.com/docs/installation?ref=material-tailwind" target="_blank">Tailwind CSS Installation.</a>
<br />
1. Intall `@material-tailwind/html`
```bash
npm i @material-tailwind/html
```
<br />
2. Once you install @material-tailwind/html you need to wrap your tailwind css configurations with the `withMT()` function coming from @material-tailwind/html/utils.
```js
const withMT = require("@material-tailwind/html/utils/withMT");
module.exports = withMT({
content: ["./index.html"],
theme: {
extend: {},
},
plugins: [],
});
```
<br />
4. Congratulations 🥳, you did it, now you're ready to use @material-tailwind/html.
<br />
<br />
## Community
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](https://discord.com/invite/FhCJCaHdQa)
## Contributing
Contributions are always welcome!
See `CONTRIBUTING.md` for ways to get started.
Please adhere to this project's `CODE_OF_CONDUCT.md`.
## License
[MIT](https://github.com/creativetimofficial/material-tailwind/blob/main/LICENSE)