Quick Start

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


Installation


NPM

Install Material Tailwind via NPM

npm i -E @material-tailwind/react

Yarn

Install Material Tailwind via Yarn

yarn add @material-tailwind/react -E

Import Material Tailwind Style Sheet

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

import "@material-tailwind/react/tailwind.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

import React from "react";
import Button from "@material-tailwind/react/Button";

export default function Example() {
    return (
        <Button color="lightBlue" ripple="light">Button</Button>
    )
}