Integrating @material-tailwind/html with Astro: A Comprehensive Guide

In this guide, we'll walk you through the process of integrating the @material-tailwind/html library into an Astro project. This integration allows you to harness the power of Material Design components within your Astro applications, ensuring a sleek and responsive user interface.



Prerequisites

Before we begin, ensure you have the following installed:

  • Node.js: Version 16 or later.
  • npm: Version 7 or later.

If you haven't installed these yet, download them from the official Node.js website.



Step 1: Setting Up a New Astro Project

Start by creating a new Astro project. Open your terminal and run:

1npm create astro@latest my-material-tailwind-app
2cd my-material-tailwind-app
3npm install


Step 2: Installing Tailwind CSS

Install Tailwind CSS and its dependencies:

1npm install -D tailwindcss postcss autoprefixer
2npx tailwindcss init -p

Add Tailwind directives in src/styles/global.css:

1@tailwind base;
2@tailwind components;
3@tailwind utilities;

Configure your tailwind.config.cjs or tailwind.config.ts:

1// For JavaScript (tailwind.config.js)
2/** @type {import('tailwindcss').Config} */
3module.exports = {
4content: [
5  "./app/**/*.{js,ts,jsx,tsx,mdx}",
6  "./pages/**/*.{js,ts,jsx,tsx}",
7  "./components/**/*.{js,ts,jsx,tsx}",
8
9  // Or if using `src` directory:
10  "./src/**/*.{js,ts,jsx,tsx,mdx}",
11],
12theme: {
13  extend: {},
14},
15plugins: [],
16}
17
18// For TypeScript (tailwind.config.ts)
19import type { Config } from 'tailwindcss'
20
21export default {
22content: [
23  "./app/**/*.{js,ts,jsx,tsx,mdx}",
24  "./pages/**/*.{js,ts,jsx,tsx}",
25  "./components/**/*.{js,ts,jsx,tsx}",
26
27  // Or if using `src` directory:
28  "./src/**/*.{js,ts,jsx,tsx,mdx}",
29],
30theme: {
31  extend: {},
32},
33plugins: [],
34} satisfies Config


Step 3: Installing @material-tailwind/html

1npm install @material-tailwind/html


Step 4: Using Material Tailwind Components in Astro

Example usage in an Astro component:

1---
2import { useEffect } from 'react';
3import { initAlert } from '@material-tailwind/html'; // ESM & CJS
4
5useEffect(() => {
6initAlert();
7}, []);
8---
9
10<div role="alert" class="relative flex w-full items-start rounded-md border border-gray-800 bg-gray-800 p-2 text-gray-50">
11  <span class="grid shrink-0 place-items-center p-1">
12      <svg width="1.5em" height="1.5em" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="h-5 w-5">
13          <path d="M12 7L12 13" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
14          <path d="M12 17.01L12.01 16.9989" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
15          <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
16      </svg>
17  </span>
18  <div class="m-1.5 w-full font-sans text-base leading-none">
19    A simple alert for showing messages.
20  </div>
21  <button data-dismiss="alert" class="outline-none">
22      <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="m-1 h-5 w-5 stroke-2">
23          <path d="M6.75827 17.2426L12.0009 12M17.2435 6.75736L12.0009 12M12.0009 12L6.75827 6.75736M12.0009 12L17.2435 17.2426" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
24      </svg>
25  </button>
26</div>

Note: For more details about the Accordion component, including examples of different styles, custom icons, and controlled behavior, check out the Accordion documentation.



TypeScript Example

For more control and type safety, you can use the programmatic approach with full TypeScript support in your Astro project:

1import { useEffect } from 'react';
2import { Accordion } from "@material-tailwind/html";
3import type { AccordionConfig, IAccordion } from "@material-tailwind/html";
4
5function TypeScriptExample() {
6useEffect(() => {
7  const container = document.getElementById('accordion-container');
8
9  if (container) {
10    const config: AccordionConfig = {
11      exclusive: true,
12      allOpen: false,
13    };
14    const accordion: IAccordion = new Accordion(container, config);
15  }
16}, []);
17
18return (
19  <div id="accordion-container" className="group block w-full">
20    <div className="flex items-center justify-between w-full py-5 text-left font-medium text-gray-800 cursor-pointer" aria-expanded="false" id="button-1">
21      Material Tailwind Astro
22      <svg data-accordion-icon width="1.5em" height="1.5em" strokeWidth="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" className="h-4 w-4 transition-transform duration-300 rotate-180">
23        <path d="M6 9L12 15L18 9" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path>
24      </svg>
25    </div>
26    <div id="button-1" className="overflow-hidden transition-all duration-300 border-b border-gray-200">
27      <p className="mb-5 text-sm text-gray-600">Material Tailwind is an open-source library crafted with Tailwind CSS. Get Material Tailwind and take advantage of its free components and features.</p>
28    </div>
29  </div>
30);
31}
32
33export default TypeScriptExample;

Note: This TypeScript example demonstrates full type safety and programmatic control of the accordion component.

TypeScript Configuration

For TypeScript projects, ensure your tsconfig.json includes:

1{
2"compilerOptions": {
3  "moduleResolution": "node",
4}
5}

Note: The TypeScript configuration above includes Astro-specific settings to ensure proper type checking and module resolution when using Material Tailwind components.