@material-tailwind/html

@material-tailwind/html

Material Tailwind HTML is an easy to use components library for Tailwind CSS. Material Tailwind HTML features multiple components, all written with Tailwind CSS classes and Material Design guidelines. Material Tailwind HTML provides a simple way to customize your components, you can change the colors, fonts, breakpoints and everything you need.

Tailwind CSS Components

• 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

Quick Start

You can download and install @material-tailwind/html as a dependency on your project.

Using NPM

npm i @material-tailwind/html

Using Yarn

yarn add @material-tailwind/html

Using PNPM

pnpm i @material-tailwind/html

TailwindCSS Configurations

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

const withMT = require("@material-tailwind/html/utils/withMT");

module.exports = withMT({
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {}
  },
  plugins: []
});

Example

Now you're good to go and use @material-tailwind/html in your project.

<button class="button button-pink">Button</button>