Material Tailwind Logo

Material Tailwind

@material-tailwind is an easy to use components library for Tailwind CSS and Material Design. It features multiple React components, all written with Tailwind CSS classes and Material Design guidelines. Coming soon components for VueJS, Angular and many more.

Subscribe to our Newsletter

Join our newsletter and get news in your inbox every week! We hate spam too, so no worries about this.

email

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>
  )
}
Card Image

Great for your awesome project

Putting together a page has never been easier than matching together pre-made components. From landing pages presentation to login areas, you can easily customise and built your pages.

CSS Components

Material Tailwind comes with a huge number of Fully Coded CSS components.

JavaScript Components

Material Tailwind only features React components, but in the near future it will future more.

Templates

Material Tailwind comes with 3 fully coded sample pages. You can start working instantly.

Documentation

Built by developers for developers. You will love how easy is to work with Material Tailwind.

CSS Components

Every element that you need in a product comes built in as a component. All components fit perfectly with each other and can have different colours.

ButtonInputsLabelsMenusNavbarsPaginationProgressbarsTypography
View All
............

Javascript Components

In order to create a great User Experience some components require JavaScript. In this way you can manipulate the elements on the page and give more options to your users.

We created a set of Components that are dynamic and come to help you.

AlertsDropdownsMenusModalsNavbarsPopoversTabsTooltips
View All

Complex Documentation

This extension comes a lot of fully coded examples that help you get started faster. You can adjust the colors and also the programming language. You can change the text and images and you're good to go.

  • Built by Developers for Developers

  • Carefully crafted code for Components

  • Dynamic Javascript Components

...

Open Source

Since Tailwind CSS is an open source project we wanted to
continue this movement too. You can give this version a try to feel
the design and also test the quality of the code!

Get it free on Github and please help us spread the news with a Star!

😍

Do you love Material Tailwind?

Cause if you do, it can be yours now. Hit the button below to navigate you to the documentation. Build a new web app or give an old project a new look!