Material Tailwind with Gatsby

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

Creating a Gatsby Project

First, create a new Gatsby project using the command below, it will create a new Gatsby project.

For more details check the Gatsby Official Documentation.

npx gatsby new my-new-project
npx gatsby new my-new-project

Install Tailwind CSS

Once you have created your Gatsby project, you need to install and configure Tailwind CSS by running the following command:

npm install -D tailwindcss postcss autoprefixer gatsby-plugin-postcss && npx tailwindcss init -p
npm install -D tailwindcss postcss autoprefixer gatsby-plugin-postcss && npx tailwindcss init -p

Enable the Gatsby PostCSS Plugin

Once you have installed Tailwind CSS, in your gatsby-config.js file, enable the gatsby-plugin-postcss.

module.exports = {
  plugins: [
    'gatsby-plugin-postcss',
    // ...
  ],
}
module.exports = {
  plugins: [
    'gatsby-plugin-postcss',
    // ...
  ],
}

Configure Your Template Paths

Next, you need to configure your template paths in your tailwind.config.js file.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/pages/**/*.{js,jsx,ts,tsx}",
    "./src/components/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/pages/**/*.{js,jsx,ts,tsx}",
    "./src/components/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Add Tailwind CSS Directives to CSS

Next, create a ./src/styles/global.css file and add the @tailwind directives for each of Tailwind's layers.

@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind base;
@tailwind components;
@tailwind utilities;

Import CSS File

Next, create a gatsby-browser.js file at the root of your project if it doesn't already exist, and import your newly-created ./src/styles/global.css file.

import './src/styles/global.css'
import './src/styles/global.css'

Install Material Tailwind

Once you installed and configured Tailwind CSS, you need to install @material-tailwind/react by running the following command:

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

Add Plugin and Template Path

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

const mtConfig = require("@material-tailwind/react").mtConfig;

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/pages/**/*.{js,jsx,ts,tsx}",
    "./src/components/**/*.{js,jsx,ts,tsx}",
    "./node_modules/@material-tailwind/react/**/*.{js,ts,jsx,tsx}"
  ],
  theme: {
    extend: {},
  },
  plugins: [mtConfig],
}
const mtConfig = require("@material-tailwind/react").mtConfig;

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/pages/**/*.{js,jsx,ts,tsx}",
    "./src/components/**/*.{js,jsx,ts,tsx}",
    "./node_modules/@material-tailwind/react/**/*.{js,ts,jsx,tsx}"
  ],
  theme: {
    extend: {},
  },
  plugins: [mtConfig],
}

Example

Now you're ready to use Material Tailwind components in your Gatsby project. Here's an example of how to use the Button component:

import { Button } from "@material-tailwind/react";

export default function Index() {
  return <Button>Button</Button>
}
import { Button } from "@material-tailwind/react";

export default function Index() {
  return <Button>Button</Button>
}