<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)
