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:

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

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>Astro</title>
  </head>
  <body>
    <Button>Button</Button>
  </body>
</html>
---
import { Button } from "@material-tailwind/react";
---

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>Astro</title>
  </head>
  <body>
    <Button>Button</Button>
  </body>
</html>