Material Design

Packages

• Material Design
• Material Icons
• Google Fonts

Material Icon Import

import { AccessAlarm, ThreeDRotation } from '@mui/icons-material';

Material Components Import and Usage

import * as React from 'react';
import Button from '@mui/material/Button';

function App() {
  return <Button variant="contained">Hello World</Button>;
}

Introduction

Installation

• Material UI

npm install @mui/material @emotion/react @emotion/styled

• Material Icons

npm install @mui/icons-material

• React Router Dom

npm install react-router-dom

• Tailwind CSS

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

• Tailwind CSS Config

/** @type {import('tailwindcss').Config} */ 
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

• index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

• Navbar.jsx

npm install @heroicons/react
npm install @headlessui/react

Tailwind CSS Documentation

https://tailwindcss.com/docs/background-color

Usage

npm start

Examples