Material Tailwind with Gatsby

Learn how to setup and install @material-tailwind/react with Gatsby.

First you need to create a new project using gatsby, for more details check the Gatsby Official Documentation

npm init gatsby

Then you need to install Tailwind CSS since @material-tailwind/react is working with Tailwind CSS classes and you need to have Tailwind CSS installed on your project. Check Tailwind CSS Installation for gatsby on Tailwind CSS Documentation.

Install @material-tailwind/react as a dependency using NPM by running the following command:

npm i @material-tailwind/react

Install @material-tailwind/react as a dependency using Yarn by running the following command:

yarn add @material-tailwind/react

Install @material-tailwind/react as a dependency using PNPM by running the following command:

pnpm i @material-tailwind/react

Once you install @material-tailwind/react you need to wrap your tailwind css configurations with the withMT() function coming from @material-tailwind/react/utils.

const withMT = require("@material-tailwind/react/utils/withMT");
 
module.exports = withMT({
  content: [
    "./src/pages/**/*.{js,jsx,ts,tsx}",
    "./src/components/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
});

If you're using monorepo in your project you need to add the theme and components paths to your tailwind.config.js.

const withMT = require("@material-tailwind/react/utils/withMT");
 
module.exports = withMT({
  content: [
    "./src/pages/**/*.{js,jsx,ts,tsx}",
    "./src/components/**/*.{js,jsx,ts,tsx}",
    "path-to-your-node_modules/@material-tailwind/react/components/**/*.{js,ts,jsx,tsx}",
    "path-to-your-node_modules/@material-tailwind/react/theme/components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
});

@material-tailwind/react comes with a theme provider that set's the default theme/styles for components or to provide your own theme/styles to your components. By default you don't need to wrap your project with the ThemeProvider but in case if you want to provide your own theme then you need to do the following in a Gatsby project.

Create a new file app-providers.js on the src/components and put the below code on that file.

import React from "react";
import { ThemeProvider } from "@material-tailwind/react";
 
const theme = {
  button: {
    defaultProps: {
      color: "teal",
    },
  },
};
 
export const AppProviders = ({ children }) => {
  return <ThemeProvider value={theme}>{children}</ThemeProvider>;
};

Then on the gatsby-browser.js make the following changes.

import "./src/styles/globals.css";
import React from "react";
import { AppProviders } from "./src/components/app-providers";
 
export const wrapRootElement = ({ element }) => (
  <AppProviders>{element}</AppProviders>
);

Now you're good to go and use @material-tailwind/react in your project.

import * as React from "react";
import { Button } from "@material-tailwind/react";
const IndexPage = () => {
  return <Button>Button</Button>;
};
 
export default IndexPage;
 
export const Head = () => <title>Home Page</title>;