Material Tailwind Installation & Usage Guide - Comprehensive Setup Tutorial

Material Tailwind offers a powerful suite of TailwindCSS components enhanced with JavaScript functionality. This comprehensive guide walks you through integrating Material Tailwind into your web development projects, from basic setup to advanced usage patterns.

1. Install TailwindCSS - Essential Foundation

TailwindCSS is a core requirement for Material Tailwind. Follow our step-by-step installation process:

Complete TailwindCSS Setup Guide

Step 1: Begin with TailwindCSS installation via npm:

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

Step 2: Set up your Tailwind configuration in tailwind.config.js:

1module.exports = {
2content: ['./src/**/*.{html,js}', './node_modules/@material-tailwind/html/**/*.{js,jsx,ts,tsx}'], // Add Material Tailwind paths
3theme: {
4  extend: {},
5},
6plugins: [],
7};

Step 3: Configure your CSS foundation:

Create a new globals.css file with these essential Tailwind directives:

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

Step 4: Link your CSS configuration (Next.js example):

1import './globals.css';

2. Material Tailwind Installation - Core Setup

Install the complete Material Tailwind package to access our full suite of features:

1npm install @material-tailwind/html

Access our comprehensive JavaScript toolkit including initialization methods, cleanup utilities, and component-specific functionality.

Component Initialization Guide

Learn how to properly initialize Material Tailwind components in your application.

Global Initialization Example:

1import { initMaterialTailwind } from '@material-tailwind/html';
2
3// Initialize all components in your app
4initMaterialTailwind();

Component-Specific Initialization

For optimized performance, initialize only the components you need:

1import { initAlert, initTabs } from '@material-tailwind/html';
2
3// Initialize specific components
4initAlert();
5initTabs();

Essential Cleanup Functions

Optimize your application's performance with our cleanup utilities, perfect for single-page applications:

Complete Cleanup Function Reference:

Component	Cleanup Function
Alert	-
Collapse	-
Accordion	`cleanupAccordions()`
Dropdown	`cleanupDropdowns()`
Gallery	`cleanupGallery()`
Modal	`cleanupModals()`
Popover	`cleanupPopovers()`
Stepper	`cleanupSteppers()`
Tabs	`cleanupTabs()`
Tooltip	`cleanupTooltips()`

Implementation Example:

1import { cleanupPopovers, cleanupDropdowns } from '@material-tailwind/html';
2
3// Cleanup specific components
4cleanupPopovers();
5cleanupDropdowns();

Framework Integration Guides

React Integration

Seamlessly integrate Material Tailwind with React applications:

1import React, { useEffect } from 'react';
2import { initMaterialTailwind } from '@material-tailwind/html';
3
4function App() {
5  useEffect(() => {
6    initMaterialTailwind(); // Initialize Material Tailwind when the app mounts
7  }, []);
8
9  return <div>Welcome to Material Tailwind!</div>;
10}
11
12export default App;

Vue Integration

Implement Material Tailwind in Vue applications with these configuration patterns:

main.js Configuration:

1import { createApp } from 'vue';
2import App from './App.vue';
3import { initMaterialTailwind } from '@material-tailwind/html';
4
5const app = createApp(App);
6
7// Initialize Material Tailwind globally
8initMaterialTailwind();
9
10app.mount('#app');

Component.vue Implementation:

1<template>
2  <div>Welcome to Material Tailwind in Vue!</div>
3</template>
4
5<script>
6import { initTabs } from '@material-tailwind/html';
7
8export default {
9  mounted() {
10    initTabs(); // Initialize specific components
11  },
12};
13</script>

Angular Integration

Integrate Material Tailwind with Angular applications:

app.component.ts Configuration:

1import { Component, AfterViewInit } from '@angular/core';
2import { initMaterialTailwind } from '@material-tailwind/html';
3
4@Component({
5  selector: 'app-root',
6  template: '<div>Welcome to Material Tailwind in Angular!</div>',
7})
8
9export class AppComponent implements AfterViewInit {
10  ngAfterViewInit() {
11    initMaterialTailwind(); // Initialize all Material Tailwind components
12  }
13}

Svelte Integration

Implement Material Tailwind in Svelte applications:

App.svelte Setup:

1<script>
2import { onMount } from 'svelte';
3import { initMaterialTailwind } from '@material-tailwind/html';
4
5onMount(() => {
6  initMaterialTailwind(); // Initialize all components
7});
8</script>
9
10<div>Welcome to Material Tailwind in Svelte!</div>

CDN Implementation Guide

Quick start with Material Tailwind using CDN integration:

Complete HTML Implementation:

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>Material Tailwind Example</title>
7  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
8  <script src="https://unpkg.com/@material-tailwind/[email protected]/dist/material-tailwind.umd.min.js"></script>
9</head>
10<body>
11  <div role="alert" class="relative flex items-start w-full border rounded-md p-2 bg-slate-800 border-slate-800 text-slate-50">
12    <span class="grid place-items-center shrink-0 p-1">
13      <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">
14        <path d="M12 7L12 13" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
15        <path d="M12 17.01L12.01 16.9989" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
16        <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>
17      </svg>
18    </span>
19    <div class="w-full text-sm font-sans leading-none m-1.5">A simple alert for showing message</div>
20    <button data-dismiss="alert" class="outline-none">
21      <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">
22        <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>
23      </svg>
24    </button>
25  </div>
26</body>
27</html>

Simple ESM & CJS Import

The quickest way to use components is through direct ESM & CJS imports:

1import { initAccordion } from '@material-tailwind/html';
2
3// Initialize accordion functionality
4initAccordion();

TypeScript

Material Tailwind components can be used in two ways - through simple ESM imports or programmatically with TypeScript support. Here's how to use both approaches:

Programmatic Usage with TypeScript

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

This programmatic approach provides:

Full TypeScript support
Fine-grained control over component behavior
Access to component instance methods
Proper cleanup on unmount

1import { Accordion } from "@material-tailwind/html";
2import type { AccordionConfig, IAccordion } from "@material-tailwind/html";
3
4document.addEventListener("DOMContentLoaded", () => {
5const container = document.getElementById('accordion-container');
6
7if (container) {
8  const config: AccordionConfig = {
9    exclusive: true,
10    allOpen: false,
11  };
12
13  const accordion: IAccordion = new Accordion(container, config);
14
15  // Handle external button controls
16  const showAllButton = document.getElementById('show-all');
17  const hideAllButton = document.getElementById('hide-all');
18  const toggleFirstButton = document.getElementById('toggle-first');
19
20  showAllButton?.addEventListener('click', () => {
21    accordion.showAll();
22  });
23
24  hideAllButton?.addEventListener('click', () => {
25    accordion.hideAll(); 
26  });
27
28  toggleFirstButton?.addEventListener('click', () => {
29    const firstButton = document.getElementById('button-1') as HTMLElement;
30    if (firstButton) {
31      accordion.toggle(firstButton);
32    }
33  });
34}
35});
36

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.

Other Components

For detailed usage of each component, check out their respective documentation:

Accordion (ESM & Programmatic)
Alert (ESM)
Collapse (ESM & Programmatic)
Dropdown (ESM & Programmatic)
Gallery (ESM)
Modal (ESM & Programmatic)
Popover (ESM & Programmatic)
Stepper (ESM & Programmatic)
Tabs (ESM & Programmatic)
Tooltip (ESM & Programmatic)

On this page

Scroll to top

Roots of UI/UX Design

By Creative TimLearn to Develop Intuitive Web Experiences

Material Tailwind Installation & Usage Guide - Comprehensive Setup Tutorial

#1. Install TailwindCSS - Essential Foundation

#Complete TailwindCSS Setup Guide

#2. Material Tailwind Installation - Core Setup

#Component Initialization Guide

#Global Initialization Example:

#Component-Specific Initialization

#Essential Cleanup Functions

#Complete Cleanup Function Reference:

#Implementation Example:

#Framework Integration Guides

#React Integration

#Vue Integration

#Angular Integration

#Svelte Integration

#CDN Implementation Guide

#Simple ESM & CJS Import

#TypeScript

#Programmatic Usage with TypeScript

#TypeScript Configuration

#Other Components