Quick Start

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


Installation

Learn how to use Material Tailwind components from this documentation to quickly and easily create elegant and flexible pages using Tailwind CSS.


NPM

Make sure that you have Node.js and Tailwind CSS installed.


Install Material Tailwind as a dependency using NPM by running the following command:

npm i @material-tailwind/html

Require Material Tailwind as a plugin inside the tailwind.config.js file:

module.exports = {
  plugins: [
    require('material-tailwind/plugin')
  ]
}

Include the main JavaScript file to make interactive elements working:

<script src="../path/to/material-tailwind.js"></script>

Yarn
yarn add @material-tailwind/html

PNPM
pnpm i @material-tailwind/html

Import Material Tailwind Style Sheet

Import the tailwind.css into your project file. Make sure to import the tailwind.css style sheet after all other style sheets.

<link rel="stylesheet" href="styles.css" />

Link Material Icons Fonts to your project

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"
/>

Example

Import the components you need


<button class="button button-pink" data-ripple-light>Button</button>