Integrating @material-tailwind/html with Vite + React: A Comprehensive Guide

In this guide, we'll walk you through the process of integrating the @material-tailwind/html library into a Vite + React project. This integration allows you to harness the power of Material Design components within your Vite applications, ensuring a sleek and responsive user interface. For other Vite project types (Vue, Svelte, Vanilla etc.), please refer to the official Vite documentation.



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 Vite + React Project

Start by creating a new Vite project with React template. Open your terminal and run:

1npm create vite@latest my-material-tailwind-app -- --template react
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/index.css:

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

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

1// For JavaScript (tailwind.config.js)
2/** @type {import('tailwindcss').Config} */
3module.exports = {
4content: [
5  './index.html',
6  './src/**/*.{js,ts,jsx,tsx}',
7],
8theme: {
9  extend: {},
10},
11plugins: [],
12};
13
14// For TypeScript (tailwind.config.ts)
15import type { Config } from 'tailwindcss'
16
17export default {
18content: [
19  './index.html',
20  './src/**/*.{js,ts,jsx,tsx}',
21],
22theme: {
23  extend: {},
24},
25plugins: [],
26} satisfies Config


Step 3: Installing @material-tailwind/html

1npm install @material-tailwind/html


Step 4: Using Material Tailwind Components

Example usage in a Vite + React component:

1import { useEffect } from 'react';
2import { initAlert } from '@material-tailwind/html';
3
4function ExampleComponent() {
5useEffect(() => {
6  initAlert();
7}, []);
8
9return (
10  <div role="alert" className="relative flex w-full items-start rounded-md border border-gray-800 bg-gray-800 p-2 text-gray-50">
11      <span className="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" className="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 className="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" className="outline-none">
22          <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" className="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>
27);
28}
29
30export default ExampleComponent;

Note: For more details about Material Tailwind components, check out the official documentation.



TypeScript Example

For more control and type safety, you can use the programmatic approach with full TypeScript support in your Vite + React 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 Vite
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 vite.config.ts and tsconfig.json are properly configured:

1// vite.config.ts
2import { defineConfig } from "vite";
3import checker from "vite-plugin-checker";
4
5export default defineConfig({
6plugins: [
7  checker({ typescript: true }),
8],
9root: "./src",
10build: {
11  outDir: "../dist",
12},
13});
14
15
16// tsconfig.json
17{
18"compilerOptions": {
19  "moduleResolution": "node",
20}
21}

Note: The library's type definitions require Node.js resolution mode to work properly. Vite's default ESM configuration works seamlessly with Material Tailwind's TypeScript definitions.