Integrating @material-tailwind/html with Create React App: A Comprehensive Guide

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

Prerequisites

Before we begin, ensure you have the following installed:

Node.js: Version 14 or later.
npm: Version 6 or later.

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

Step 1: Setting Up a New Create React App Project

Start by creating a new React project using Create React App. Open your terminal and run:

1npx create-react-app my-material-tailwind-app
2cd my-material-tailwind-app

Step 2: Installing Tailwind CSS

Install Tailwind CSS and its peer dependencies:

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

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

Add Tailwind directives to your src/index.css:

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

Step 3: Installing @material-tailwind/html

1npm install @material-tailwind/html

Step 4: Using Material Tailwind Components

Example usage in a React component:

1import React, { useEffect } from 'react';
2import { initAlert } from '@material-tailwind/html'; // ESM & CJS
3
4function ExampleComponent() {
5useEffect(() => {
6  initAlert();
7}, []);
8
9return (
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">
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 message.
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>
27);
28}
29
30export 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 TypeScript support in your Create React App:

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;

TypeScript Configuration

If you're using TypeScript (create-react-app --template typescript), ensure your tsconfig.json includes:

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

Note: Create React App comes with TypeScript support out of the box when using the TypeScript template. You can create a new TypeScript project using npx create-react-app my-app --template typescript.

Building for Production

When you're ready to build your React app for production:

1npm run build

This will create an optimized production build in the build directory.

On this page

Scroll to top

Roots of UI/UX Design

By Creative TimLearn to Develop Intuitive Web Experiences

Integrating @material-tailwind/html with Create React App: A Comprehensive Guide

#Prerequisites

#Step 1: Setting Up a New Create React App Project

#Step 2: Installing Tailwind CSS

#Step 3: Installing @material-tailwind/html

#Step 4: Using Material Tailwind Components

#TypeScript Example

#TypeScript Configuration

#Building for Production