Get Started with Material Tailwind

Material Tailwind is free and open-source components library for Tailwind CSS inspired by Material Design.

Installation

Learn how to use @material-tailwind/html components from this documentation 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.

Using NPM

Install @material-tailwind/html as a dependency using NPM by running the following command:

npm i @material-tailwind/html

Using Yarn

Install @material-tailwind/html as a dependency using Yarn by running the following command:

yarn add @material-tailwind/html

Using PNPM

Install @material-tailwind/html as a dependency using PNPM by running the following command:

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/utils.

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

Ripple Effect

@material-tailwind/html comes with a ripple effect script file same as Material Design ripple effect and you can simply use it by adding it's CDN link to you project and add the data-ripple-light="true" for light ripple effect and data-ripple-dark="true" for dark ripple effect as an attribute for components

The ripple effect used in @material-tailwind/html is a separate package called material-ripple-effect

<!-- from node_modules -->
<script src="node_modules/@material-tailwind/html@latest/scripts/ripple.js"></script>
 
<!-- from cdn -->
<script src="https://unpkg.com/@material-tailwind/html@latest/scripts/ripple.js"></script>

Icons

Add a link for the material icons fonts inside the head of your project, so to use the material icons with material tailwind components. You can also use font awesome font family for the project just add a link for it inside the head of your project.

<!-- Material Icons Link -->
<link
  href="https://fonts.googleapis.com/icon?family=Material+Icons"
  rel="stylesheet"
/>
 
<!-- Font Awesome Link -->
<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"
  integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w=="
  crossorigin="anonymous"
/>

CDN

You can use @material-tailwind/html as a CDN link as well, you just need to add the stylesheet and the script file for the component you want to use.

<!-- stylesheet -->
<link
  rel="stylesheet"
  href="https://unpkg.com/@material-tailwind/html@latest/styles/material-tailwind.css"
/>
 
<!-- script -->
<script src="https://unpkg.com/@material-tailwind/html@latest/scripts/script-name.js"></script>

Example

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

  <button
    className="middle none rounded-lg bg-gray-900 py-3 px-6 text-center align-middle font-sans text-xs font-bold uppercase text-white shadow-md shadow-gray-900/10 transition-all hover:shadow-lg hover:shadow-gray-900/20 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
    data-ripple-light="true"
  >
    Button
  </button>

Framework-specific guides that cover our recommended approach to installing @material-tailwind/html in a number of popular environments. Select your preferred framework from the list below and follow the instructions.