Material-tailwind - An easy-to-use components library for Tailwind CSS and Material Design

Last update: Jun 20, 2022

@material-tailwind

version license GitHub issues open GitHub issues closed

@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

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.

// Font Awesome Link ">
// Material Icons Link

  

// Font Awesome Link

  

Documentation - React

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

Usage

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

export default function Example() {
  return (
    
  )
}

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

https://github.com/creativetimofficial/material-tailwind
Comments
  • 1. Typescript support

    Expected Behavior

    Should be able to use in TS project without any errors saying it Could not find a declaration file for module@material-tailwind/react/*`.

    Current Behavior

    I cannot use it in TS project as seen here: image

    Possible Solution

    Add native TS support or create typings.

    Steps to Reproduce (for bugs)

    1. Create empty NextJS/React app with TS support
    2. Install material-tailwind
    3. Import material component

    Your Environment

    Current version of material-tailwind. NextJS TS project.

    Reviewed by yamiteru at 2021-05-24 13:40
  • 2. SyntaxError: Unexpected token 'export'

    Hello, I have used old version and it run well until new version come out. I follow instruction to install new version, however I get error:

    ...\node_modules\@material-tailwind\react\index.js:1
    export * from "./components/Accordion";
    ^^^^^^
    SyntaxError: Unexpected token 'export'
        at compileFunction (<anonymous>)
        at Object.compileFunction (node:vm:352:18)
        at wrapSafe (node:internal/modules/cjs/loader:1031:15)
        at Module._compile (node:internal/modules/cjs/loader:1065:27)
        at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
        at Module.load (node:internal/modules/cjs/loader:981:32)
        at Function.Module._load (node:internal/modules/cjs/loader:822:12)
        at Module.require (node:internal/modules/cjs/loader:1005:19)
        at require (node:internal/modules/cjs/helpers:102:18)
        at [email protected]/react (...\.next\server\pages\_app.js:216:18)
    

    Here is my _app.js code:

    import '../styles/globals.css'
    import 'tailwindcss/tailwind.css'
    import '@material-tailwind/react'
    import React from 'react';
    import App from 'next/app';
    import MainLayout from '../components/mainlayout';
    
    class MyApp extends App {
      render() {
        const { Component, pageProps } = this.props;
        const Layout = Component.Layout || Component.DefaultLayout;
    
        return (
          <MainLayout>
            <Layout>
              <Component {...pageProps} />
            </Layout>
          </MainLayout>
        );
      }
    }
    
    export default MyApp;
    
    

    this is tailwind.config.js

    const withMT = require("@material-tailwind/react/utils/withMT");
    
    module.exports = withMT({
      content: [
        './pages/**/*.{js,ts,jsx,tsx}',
        './components/**/*.{js,ts,jsx,tsx}',
        './src/layouts/**/*.{html,js}',
        './src/index.html',
        { raw: '<div class="font-bold">', extension: 'html' },
      ],
      theme: {
        extend: {},
      },
      plugins: [],
    });
    
    
    Reviewed by ichuoi at 2022-05-14 11:13
  • 3. Global CSS cannot be imported from within node_modules

    In trying to use the Popover component in a Nextjs codebase,

    import Popover from '@material-tailwind/react/Popover'
    ...
    <Popover placement='left' ref={targetRef}>
      <PopoverContainer>
        <PopoverHeader>{prop.title}</PopoverHeader>
        <PopoverBody>{prop.description}</PopoverBody>
      </PopoverContainer>
    </Popover>
    

    I get the following error in Nextjs:

    wait  - compiling...
    error - ./node_modules/tippy.js/dist/svg-arrow.css
    Global CSS cannot be imported from within node_modules.
    Read more: https://nextjs.org/docs/messages/css-npm
    Location: node_modules/@material-tailwind/react/Popover.js
    

    Nextjs doesn't like it when a package is importing a CSS file from another module. See: https://nextjs.org/docs/messages/css-npm

    Reviewed by rmanalan at 2021-04-25 23:15
  • 4. Breakpoints not working with Material Tailwind & Next.js

    Expected Behavior

    After starting a fresh project with the next.js tailwindCSS starter template and installing the material-tailwind package as per the docs, I created a heading which I expect to be aligned to the left from medium screens and up.

    The code used is as follows:

    <h1 className="text-center text-3xl md:text-left">Hello</h1>
    

    Current Behavior

    Instead I get the text centered at all screen sizes (breakpoints). This happens with multiple components within my fresh application.

    Possible Solution

    The only way I can get the application to work as intended is to remove the line importing the material tailwind CSS in the _app.js file and keep the tailwindcss/tailwind.css style import.

    My _app.js file is as follows:

    import Head from 'next/head';
    import 'tailwindcss/tailwind.css';
    // removing the below line makes the breakpoints work as intended
    import '@material-tailwind/react/tailwind.css';
    
    function MyApp({ Component, pageProps }) {
        return (
            <>
                <Head>
                    <link
                        href="https://fonts.googleapis.com/icon?family=Material+Icons"
                        rel="stylesheet"
                    />
                </Head>
                <Component {...pageProps} />
            </>
        );
    }
    
    export default MyApp;
    
    

    Steps to Reproduce (for bugs)

    1. npx create-next-app -e with-tailwindcss my-project
    2. npm install -D [email protected] [email protected] [email protected]
    3. npx tailwindcss init -p
    4. npm i -E @material-tailwind/react
    5. Import the material CSS file so your _app.js looks like so:
    import Head from 'next/head';
    import 'tailwindcss/tailwind.css';
    import '@material-tailwind/react/tailwind.css';
    
    function MyApp({ Component, pageProps }) {
        return (
            <>
                <Head>
                    <link
                        href="https://fonts.googleapis.com/icon?family=Material+Icons"
                        rel="stylesheet"
                    />
                </Head>
                <Component {...pageProps} />
            </>
        );
    }
    
    export default MyApp;
    
    1. In index.js create a component as follows:
    
    export default function Home() {
        return (
                <div>
                    <h1 className="text-center text-3xl md:text-left">Hello</h1>
                </div>
        );
    }
    
    1. Once you view it in your browser and resize, you can see that text does not realign.

    Context

    I was watching a live coding session on YT and I saw the programmer run into this problem and not resolve it so I just had a quick look.

    Your Environment

    • Version used: ^0.3.4
    • Browser Name and version: Chrome version 91.0.4472.114
    • Operating System and version (desktop or mobile): Mac
    • Link to your project:
    Reviewed by dwalsh01 at 2021-07-11 16:42
  • 5. Dev main

    Ability to pass className as props for cards. This will allow devs to add additional compatible tailwind CSS classes or custom classes for a more customized UI experience.

    Reviewed by Ianodad at 2021-04-27 14:25
  • 6. fix(html): radio button

    Summary

    fix radio button component

    Description

    Radio button currently is not working well. The style is based on checked attribute and not property which causes the following problem

    The script of the radio button removes the selection from all the radiobuttons. This is a problem if there are other radio button groups (created by different name attrs) as the css follows the attribute and not the prop, there can be selected radios not visible on the page but will be selected on form submissions.

    Fix

    The fix is simply updating the css to check for checked prop instead of checked attribute

      ".radio:checked + .form-check-input": { // instead of .radio[checked]
        "border-color": theme("colors.pink.500")
      },
      ".radio:checked + .form-check-input:after": { // instead of .radio[checked]
        "opacity": "1"
      }
    

    This way the browser can do its magic so the script can be deleted. Also radio groups would work natively

    Reviewed by oren1991 at 2022-06-24 22:09
  • 7. [feature request] change progress percentage label/text

    Expected Behavior

    If possible, change the label "Completed" in progress bar, percentage = true

    Current Behavior

    No API yet to edit this

    Possible Solution

    <Progress
      color="lightGreen"
      value="100"
      percentage={true}
      percentageLabel="Compressed" # suggestion
    />
    

    Your Environment

    • Version used: 1.0.7
    • Browser Name and version: chrome
    • Operating System and version (desktop or mobile): desktop
    • Link to your project:
    Reviewed by shierro at 2021-08-25 13:40
  • 8. Overide ClassName for Modal Component

    It seems the I can overide the className prop for every other component except Modals. I am trying to position the modal at the bottom of the screen and change the background colour.

    Reviewed by dgan181 at 2021-06-28 10:21
  • 9. Override classes on components

    Since this is using Tailwind, we should be able to override classes on components. For example, I'd love to change the bg color of a popover, but I can't. Will this be supported?

    Reviewed by rmanalan at 2021-04-27 23:55
  • 10. Error on require('material-tailwind/plugin')

    SO: Ubuntu 22.04 Environment: nextjs: 12.1.6 react: 18 typescript: 4.6.4

    Commands: yarn add @material-tailwind/html

    require('material-tailwind/plugin') <- Add to tailwind config

    Error:

    error - ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[3].oneOf[8].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[3].oneOf[8].use[2]!./src/styles/globals.css
    Error: Cannot find module 'material-tailwind/plugin'
    Require stack:
    - /home/pedro/www/next-template/tailwind.config.js
    - /home/pedro/www/next-template/node_modules/tailwindcss/lib/lib/setupTrackingContext.js
    - /home/pedro/www/next-template/node_modules/tailwindcss/lib/index.js
    - /home/pedro/www/next-template/node_modules/next/dist/build/webpack/config/blocks/css/plugins.js
    - /home/pedro/www/next-template/node_modules/next/dist/build/webpack/config/blocks/css/index.js
    - /home/pedro/www/next-template/node_modules/next/dist/build/webpack/config/index.js
    - /home/pedro/www/next-template/node_modules/next/dist/build/webpack-config.js
    - /home/pedro/www/next-template/node_modules/next/dist/server/dev/hot-reloader.js
    - /home/pedro/www/next-template/node_modules/next/dist/server/dev/next-dev-server.js
    - /home/pedro/www/next-template/node_modules/next/dist/server/next.js
    - /home/pedro/www/next-template/node_modules/next/dist/server/lib/start-server.js
    - /home/pedro/www/next-template/node_modules/next/dist/cli/next-dev.js
    - /home/pedro/www/next-template/node_modules/next/dist/bin/next
    
    Reviewed by Pedromdsn at 2022-06-10 15:18
  • 11. Input Field Unwanted Boder Appered

    Whenever the Input field is in focus, a border appears apart from the variant border style. is there any way to remove or disable it if it is present intentionally as a design? otherwise, if it's a bug please fix it as soon as possible by the way, I am using the latest version

      "dependencies": {
        "@material-tailwind/react": "^1.0.3",
      }
    

    and my tailwind.config.js file looks like

    const withMT = require("@material-tailwind/react/utils/withMT"); 
    
    module.exports = withMT({
      content: ["./src/**/*.{js,jsx,ts,tsx}"],
    
      theme: { ...  },
      plugins: [],
      });
    
    
    Reviewed by Md-Sarfaraz at 2022-05-12 13:43
  • 12. Suggestions

    Good Morning,

    Very good work with the Material kit it is just magnificent (Especially the Button).

    So I would like to contribute with some component ideas that I think are essential to start using the Material kit in production.

    1. Spiners - I know it's not hard to do, but it would take several minutes if the lib already came with them. image

    2. Skeleton - Same as spiners. image

    3. Badge - Same as Skeleton. image

    4. Pagination - This one is already more boring, it would be top if it came with the lib. image

    5. Autocomplete - Much more boring to do but it makes the sites look much more professional. image

    Now we get to the extras part, it was great to have but it wouldn't be a priority.

    1. Rating - To be able to rate the projects (5 stars XD) image

    2. Slider - You can do some funny things. image

    3. Stepper - Very useful for splitting forms. image

    Now dreamed.

    1. Mockup - Mobile, PC, Code screens. Very useful in certain scenarios. image image image
    Reviewed by Pedromdsn at 2022-05-19 22:59
Court.css - A naive CSS Utility framework based on JSX and css custom properties

court.css ?? A (work in progress) JSX-based, CSS utility framework with a predic

Mar 14, 2022
Create tailwind css react components like styled components with classes name on multiple lines

Create Tailwind CSS React components like styled components with class names on multiple lines and conditional class rendering

Jun 21, 2022
Incredible fast template toolkit for making new or re-styling existing components with Tailwind CSS.

Stail Incredible fast template toolkit for making new or re-styling existing components with Tailwind CSS. Why it's needed? First of all, I'm tired fr

Jun 18, 2022
🎨 Aesthetic is an end-to-end multi-platform styling framework that offers a strict design system, robust atomic CSS-in-JS engine, a structural style sheet specification (SSS), a low-runtime solution, and much more!

Aesthetic Start using Aesthetic now! aestheticsuite.dev Aesthetic is an end-to-end, multi-platform styling and design suite, that offers the following

Jun 14, 2022
CSS media queries in react - for responsive design, and more.

react-responsive Information Package react-responsive Description Media queries in react for responsive design Browser Version >= IE6* Demo The best s

Jun 21, 2022
Whirlwind is a utility-first styling framework specifically designed for React Native. It is heavily inspired by Tachyons and Tailwind CSS and uses low-level building blocks for rapidly building custom designs.

React Native Whirlwind ??️ A utility-first CSS framework designed for React Native. Whirlwind is a utility-first CSS framework specifically designed f

May 6, 2022
Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation

Aphrodite Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation. Support for colocating y

Jun 19, 2022
🏠 Airbnb website using React, Next.js and Tailwind CSS
🏠 Airbnb website using React, Next.js and Tailwind CSS

This example shows how to use Tailwind CSS (v2.2) with Next.js. It follows the steps outlined in the official Tailwind docs.

May 2, 2022
Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅
Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅

Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress ?? Looking for v5? The master branch is un

Jun 27, 2022
Parse CSS and add vendor prefixes to rules by Can I Use

Autoprefixer PostCSS plugin to parse CSS and add vendor prefixes to CSS rules using values from Can I Use. It is recommended by Google and used in Twi

Jun 19, 2022
Starter template for NextJs with TypeScript. Supports Tailwind with CSS-Modules
Starter template for NextJs with TypeScript. Supports Tailwind with CSS-Modules

Starter template for NextJs with TypeScript. Supports Tailwind with CSS-Modules. Jest and @react/testing-library configured and ready to go. Also ESLint, Prettier, Husky, Commit-lint and Atomic Design for components.

Jun 9, 2022
The UI design language and React library for Conversational UI
The UI design language and React library for Conversational UI

The UI design language and React library for Conversational UI Website:https://chatui.io English | 简体中文 Features ?? Best Practices: The best practice

Jun 9, 2022
Encapsulated styling for your javascript components with all the power of javascript and CSS combined.

Stilr Encapsulated styling for your javascript components with all the power of javascript and CSS combined. Unique class names (Content Hash Based) U

May 30, 2022
👩‍🎤 CSS-in-JS library designed for high performance style composition
👩‍🎤 CSS-in-JS library designed for high performance style composition

emotion The Next Generation of CSS-in-JS Emotion 11 has been released ?? See the blog post Emotion is a performant and flexible CSS-in-JS library. Bui

Jun 24, 2022
Compile-time atomic CSS library.

pieces-js Compile-time atomic CSS library. Heavily inspired by stylex and linaria. Install Usage Dynamic styles Setup with bundler with Next.js with V

Mar 9, 2022
Seamless mapping of class names to CSS modules inside of React components.
Seamless mapping of class names to CSS modules inside of React components.

React CSS Modules React CSS Modules implement automatic mapping of CSS modules. Every CSS class is assigned a local-scoped identifier with a global un

Jun 19, 2022
Style your React components with simplicity using css inside your comments.

Style your React components with simplicity using css inside your comments.

Oct 12, 2021
Vite plugin that emulates Scoped CSS for React components

vite-react-css Vite plugin that emulates Scoped CSS for React components (using generated class names) Compatible with SSR Automatic code-splitting Ho

Feb 7, 2022
Minimal and performant React component library built on styled-components

Minimal and performant React component library built on styled-components

Jan 3, 2022