Material Tailwind with Astro

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

Creating an Astro Project

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

For more details check the Astro Official Documentation.

npm create astro@latest my-project
npm create astro@latest my-project

Add React to Astro

Next, you need to add React to your Astro project by running the following command:

npx astro add react
npx astro add react

Add Tailwind CSS to Astro

Next, you need to install and configure Tailwind CSS by running the following command:

npx astro add tailwind
npx astro add tailwind

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.mjs file.

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

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}",
    "./node_modules/@material-tailwind/react/**/*.{js,ts,jsx,tsx}"
  ],
  theme: {
    extend: {},
  },
  plugins: [mtConfig],
}
import { mtConfig } from "@material-tailwind/react";

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}",
    "./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 Astro project. Here's an example of how to use the Button component: