@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
• Dropdowns
• Dropups
• Images
• Inputs
• Labels
• Menus
• Modals
• Navbars
• Paginations
• Popovers
• Progressbars
• Tabs
• Tooltips
• Typography

Quick start

React

Using NPM

npm i -E @material-tailwind/react

Using Yarn

yarn add @materia-tailwind/react -E

Import Style Sheets

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

import "material-design-icons/iconfont/material-icons.css";
import "@material-tailwind/react/tailwind.css";

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/