@material-tailwind

version license GitHub issues open GitHub issues closed

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. Add this repository to your watch list to get the latest news, or join our newsletter community: https://material-tailwind.com/.

Table of Contents

Components

Quick start

React

Using NPM
npm i -E @material-tailwind/react
Using 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"
/>

Documentation – React

After you have installed @material-tailwind into your project, you can import and use our components like so:

Usage

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

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

Browser Support

At present, we officially aim to support the last two versions of the following browsers:

Chrome Firefox Edge Safari Opera

Reporting Issues

We use GitHub Issues as the official bug tracker for the @material-tailwind. Here are some advices for our users that want to report an issue:

  1. Make sure that you are using the latest version of the @material-tailwind.
  2. Providing us reproducible steps for the issue will shorten the time it takes for it to be fixed.
  3. Some issues may be browser specific, so specifying in what browser you encountered the issue might help.

Licensing

Useful Links

Social Media

Twitter: https://twitter.com/CreativeTim

Facebook: https://www.facebook.com/CreativeTim

Dribbble: https://dribbble.com/creativetim

Instagram: https://www.instagram.com/creativetimofficial/

GitHub

View Github