Integrating @material-tailwind/html with Next.js: A Comprehensive Guide

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



Prerequisites

Before we begin, ensure you have the following installed:

  • Node.js: Version 12 or later.
  • npm: Version 6 or later.

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



Step 1: Setting Up a New Next.js Project

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

1npx create-next-app@latest my-material-tailwind-app
2cd my-material-tailwind-app


Step 2: Installing Tailwind CSS

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

Add Tailwind directives in styles/globals.css:

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

Import styles in app/layout.tsx (for Next.js 13+) or pages/_app.js (for older versions):

1// For Next.js 13+ (app/layout.tsx)
2import './globals.css'
3
4export default function RootLayout({
5children,
6}: {
7children: React.ReactNode
8}) {
9return (
10  <html lang="en">
11    <body>{children}</body>
12  </html>
13)
14}
15
16// For older versions (pages/_app.js)
17import '../styles/globals.css';
18
19function MyApp({ Component, pageProps }) {
20return <Component {...pageProps} />;
21}
22
23export default MyApp;

Configure your tailwind.config.js 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

Example usage in a Next.js component:

1import React, { useEffect } from 'react';
2import { initAlert } from '@material-tailwind/html'; // ESM & CJS
3
4function ExampleComponent() {
5  useEffect(() => {
6    initAlert();
7  }, []);
8
9  return (
10    <div role="alert" class="relative flex w-full items-start rounded-md border border-slate-800 bg-slate-800 p-2 text-slate-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"><path d="M12 7L12 13" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M12 17.01L12.01 16.9989" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><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></svg>
13        </span>
14        <div class="m-1.5 w-full font-sans text-base leading-none">
15          A simple alert for showing message.
16        </div>
17        <button data-dismiss="alert" class="outline-none">
18            <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">
19                <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>
20            </svg>
21        </button>
22    </div>
23
24  );
25}
26
27export default ExampleComponent;

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 Next.js application:

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
15    const accordion: IAccordion = new Accordion(container, config);
16  }
17}, []);
18
19return (
20  <div id="accordion-container" className="group block w-full">
21    <div 
22      className="flex items-center justify-between w-full py-5 text-left font-medium dark:text-white text-slate-800 cursor-pointer"
23      aria-expanded="false"
24      id="button-1">
25      Material Tailwind React
26      <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">
27        <path d="M6 9L12 15L18 9" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path>
28      </svg>
29    </div>
30    <div id="button-1" className="overflow-hidden transition-all duration-300 border-b border-slate-200 dark:border-slate-700">
31      <p className="mb-5 text-sm text-slate-600 dark:text-slate-400">Material Tailwind is an open-source library crafted with Tailwind CSS. Get Material Tailwind and take advantage of its free components and features.</p>
32    </div>
33
34    <div 
35      className="flex items-center justify-between w-full py-5 text-left font-medium dark:text-white text-slate-800 cursor-pointer"
36      aria-expanded="false"
37      id="button-2">
38      Material Tailwind HTML
39      <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">
40        <path d="M6 9L12 15L18 9" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path>
41      </svg>
42    </div>
43    <div id="button-2" className="overflow-hidden transition-all duration-300 border-b border-slate-200 dark:border-slate-700">
44      <p className="mb-5 text-sm text-slate-600 dark:text-slate-400">Material Tailwind is an open-source library crafted with Tailwind CSS. Get Material Tailwind and take advantage of its free components and features.</p>
45    </div>
46  </div>
47);
48}
49
50export default TypeScriptExample;

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


This TypeScript example demonstrates:

  • Full type safety with proper interfaces
  • Component lifecycle management
  • Event listener cleanup
  • Programmatic control of the accordion


TypeScript Configuration

If you're using TypeScript and encounter type resolution issues, ensure your tsconfig.json has the correct module resolution strategy:

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

Note: This is particularly important for Next.js projects or when using modern module resolution strategies. The library's type definitions require Node.js resolution mode to work properly.