Get Started with Material Tailwind

Material Tailwind is a free and open-source components library for ReactJS and Tailwind CSS inspired by Material Design.

Installation

Learn how to use @material-tailwind/react components from this documentation to quickly and easily create elegant and flexible pages using Tailwind CSS.

@material-tailwind/react is working with Tailwind CSS classes and you need to have Tailwind CSS installed on your project - Tailwind CSS Installation Guide.


npm i @material-tailwind/react@beta
npm i @material-tailwind/react@beta

TailwindCSS Configurations

Once you installed @material-tailwind/react you need to add mtConfig to your tailwind.config.js file.


import type { Config } from "tailwindcss";
import { mtConfig } from "@material-tailwind/react";

const config: Config = {
  content: [
    ...
    "./node_modules/@material-tailwind/react/**/*.{js,ts,jsx,tsx}"
  ],
  plugins: [mtConfig],
};

export default config;
import type { Config } from "tailwindcss";
import { mtConfig } from "@material-tailwind/react";

const config: Config = {
  content: [
    ...
    "./node_modules/@material-tailwind/react/**/*.{js,ts,jsx,tsx}"
  ],
  plugins: [mtConfig],
};

export default config;

For more guides on how to use @material-tailwind/react with different frameworks, check the Frameworks Integration section.

Frameworks Integration

Framework-specific guides that cover our recommended approach to installing @material-tailwind/react in a number of popular environments. Select your preferred framework from the list below and follow the instructions.

TypeScript

@material-tailwind/react is a TypeScript based components library and you can easily use it in your TypeScript based projects.