Material Tailwind with Astro

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

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

npm create astro@latest

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. To install tailwind css in your astro project run the below command, for more details check the Astro Integration with Tailwind CSS

npx astro add tailwind

Then you need to install React.JS since @material-tailwind/react is a UI Components library for React and you need to add react.js to your astro project. To install react.js in your astro project run the below command, for more details check the Astro Integration with React.JS

npx astro add react

Using NPM

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

npm i @material-tailwind/react

Using Yarn

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

yarn add @material-tailwind/react

Using PNPM

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

pnpm i @material-tailwind/react

TailwindCSS Configurations

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/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
  theme: {
    extend: {},
  },
  plugins: [],
});

TailwindCSS Configurations with MonoRepo

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/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}",
    "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: [],
});

Theme Provider

@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 Astro project.

First create a new file theme-provider.jsx on the src/components directory of your project and put the below code inside that file.

import { ThemeProvider as MTThemeProvider } from "@material-tailwind/react";
 
export function ThemeProvider({ children }) {
  return <MTThemeProvider>{children}</MTThemeProvider>;
}
 
export default ThemeProvider;

Then import the theme-provider component to the pages/index.astro file and wrap all the elements inside the body with the theme-provider.

---
import { ThemeProvider } from "../components/theme-provider";
---
 
<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>
    <ThemeProvider>
      <!-- Other elements and components goes there -->
    </ThemeProvider>
  </body>
</html>

Components Usage

Since most of the components from @material-tailwind/react are interactive you need to use the client:load directive to enable those interactivities.

Create a new file dropdown-menu.jsx on the src/components directory of your project and put the below code inside that file.

import {
  Menu,
  MenuHandler,
  MenuList,
  MenuItem,
  Button,
} from "@material-tailwind/react";
 
export default function DropdownMenu() {
  return (
    <Menu>
      <MenuHandler>
        <Button>Open Menu</Button>
      </MenuHandler>
      <MenuList>
        <MenuItem>Menu Item 1</MenuItem>
        <MenuItem>Menu Item 2</MenuItem>
        <MenuItem>Menu Item 3</MenuItem>
      </MenuList>
    </Menu>
  );
}

Then import the dropdown-menu component to the pages/index.astro file.

---
import DropdownMenu from "../components/dropdown-menu";
---
 
<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>
    <DropdownMenu client:load />
  </body>
</html>

Example

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

---
import DropdownMenu from "../components/dropdown-menu";
---
 
<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>
    <DropdownMenu client:load />
  </body>
</html>