@material-tailwind

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

Components

• Alerts
• Buttons
• Cards
• Checkbox
• Dropdowns
• Dropups
• Images
• Inputs
• Labels
• Menus
• Modals
• Navbars
• Paginations
• Popovers
• Progressbars
• Radio Button
• Tabs
• Textarea
• Tooltips
• Typography

Quick start

React

Using NPM

npm i -E  @benchmarkdigital/material-tailwind

Using Yarn

yarn add @benchmarkdigital/material-tailwind -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 "@benchmarkdigital/material-tailwind/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

• Copyright 2021 Creative Tim

• Licensed under MIT

Useful Links

• Tutorials
• Affiliate Program (earn money)
• Blog Creative Tim
• Free Products from Creative Tim
• Premium Products from Creative Tim
• React Products from Creative Tim
• Angular Products from Creative Tim
• VueJS Products from Creative Tim
• More products from Creative Tim
• Check our Bundles here
• Check our awesome builder here

Social Media

Twitter: https://twitter.com/CreativeTim

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

Dribbble: https://dribbble.com/creativetim

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