✨ Material Tailwind NextJs에서 사용하기
✅ 필요한 파일들 설치
next js app을 만들고
필요한 라이브러리들을 설치한다.
npx creaet-next-app@latest --experimental-app nextjs13-with-mui-and-tailwindcss --typecript
npm install @mui/material @emotion/react @emotion/styled
npm install @material-tailwind/react✅ tailwind.config.ts
import type { Config } from 'tailwindcss';
const withMT = require('@material-tailwind/react/utils/withMT');
const config: Config = withMT({
corePlugins: {
preflight: true,
},
content: [
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
'./components/**/*.{js,ts,jsx,tsx,mdx}',
'./app/**/*.{js,ts,jsx,tsx,mdx}',
'./node_modules/@material-tailwind/react/components/**/*.{js,ts,jsx,tsx,mdx}',
'./node_modules/@material-tailwind/react/theme/components**/*.{js,ts,jsx,tsx,mdx}',
],
theme: {
extend: {
backgroundImage: {
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
'gradient-conic':
'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
},
screens: {
sm: '443px', // Change this to your desired value for small screens (sm)
md: '660px', // Change this to your desired value for medium screens (md)
lg: '800px', // Change this to your desired value for large screens (lg)
},
},
},
plugins: [],
});
export default config;content에 기본적으로 설치되어있는 경로에다가 './node_modules에 있는 @material-tailwind를 사용하겠다고 선언한다.
✅ Provider 컴포넌트로 ProviderTheme 연결하기
material-tailwind는 클라이언트 컴포넌트에서 실행된다. 따라서 layout.tsx에다가 바로 ProviderTheme이라는 기능을 사용할 수 없다. 간단하게 해당 기능에 대해서 알아보자면 컴포넌트들에서 material-tailwind가 동작할 수 있는 환경을 만들어준다.
Provider Component 만들기
'use client';
import React from 'react';
import { ThemeProvider } from '@material-tailwind/react';
import CssBaseline from '@mui/material/CssBaseline';
import { StyledEngineProvider } from '@mui/material';
const Provider = ({ children }: { children: React.ReactNode }) => {
return (
<>
<StyledEngineProvider injectFirst>
<ThemeProvider>
<CssBaseline />
{children}
</ThemeProvider>
</StyledEngineProvider>
</>
);
};
export default Provider;StyledEngineProvider injectFirst 해당 모듈은 커스텀 theme을 사용할 때 기본 theme보다 우선순위로 사용하게 해준다.
ThemeProvider 은 자식 컴포넌트들에게 theme를 적용시킨다. (필수)
CssBaseline tailwind의 Css 정규화 모듈이다.
이렇게 자식 컴포넌트를 감싸는 구조로 해당 컴포넌트의 제작을 마친다.
layout.tsx 에 적용하기
간단하게 앞서 제작한 Provider 컴포넌트를 불러와서 자식 노드들을 감싸준다.
import './globals.css';
import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
import Provider from './Provider';
const inter = Inter({ subsets: ['latin'] });
export const metadata: Metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body className={inter.className}>
<Provider>
<main>{children}</main>
</Provider>
</body>
</html>
);
}이제 layout.tsx의 자식노드들은 material-tailwind를 사용할 준비가 끝났다.
'use client';
import React, { useState, useEffect } from 'react';
import {
Navbar,
Collapse,
Typography,
IconButton,
} from '@material-tailwind/react';
function NavHeader() {
return (
<ul className="my-2 flex flex-col gap-2 sm:mb-0 sm:mt-0 sm:flex-row sm:items-center sm:gap-4">
<Typography
as="li"
variant="small"
color="blue-gray"
className="p-1 font-medium"
>
<a
href="#"
className="flex items-center hover:text-blue-500 transition-colors"
>
Pages
</a>
</Typography>
<Typography
as="li"
variant="small"
color="blue-gray"
className="p-1 font-medium"
>
<a
href="#"
className="flex items-center hover:text-blue-500 transition-colors"
>
Account
</a>
</Typography>
<Typography
as="li"
variant="small"
color="blue-gray"
className="p-1 font-medium"
>
<a
href="#"
className="flex items-center hover:text-blue-500 transition-colors"
>
Blocks
</a>
</Typography>
<Typography
as="li"
variant="small"
color="blue-gray"
className="p-1 font-medium"
>
<a
href="#"
className="flex items-center hover:text-blue-500 transition-colors"
>
Docs
</a>
</Typography>
</ul>
);
}
export default function Header() {
const [openNav, setOpenNav] = useState(false);
const handleWindowResize = () => {
console.log(window.innerWidth);
window.innerWidth >= 443 && setOpenNav(false);
};
useEffect(() => {
window.addEventListener('resize', handleWindowResize);
return () => {
window.removeEventListener('resize', handleWindowResize);
};
}, []);
return (
<Navbar className="mx-auto max-w-screen-xl px-6 py-3 bg-slate-700">
<div className="flex items-center justify-between text-blue-gray-900">
<Typography
as="a"
href="#"
variant="h6"
className="mr-4 text-stone-50 cursor-pointer py-1.5"
>
NPMI
</Typography>
<div className=" hidden sm:block">
<NavHeader />
</div>
<IconButton
variant="text"
className="ml-auto h-6 w-6 text-inherit hover:bg-transparent focus:bg-transparent active:bg-transparent sm:hidden"
ripple={false}
onClick={() => setOpenNav(!openNav)}
>
{openNav ? (
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
className="w-6 h-6"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M7.5 7.5h-.75A2.25 2.25 0 004.5 9.75v7.5a2.25 2.25 0 002.25 2.25h7.5a2.25 2.25 0 002.25-2.25v-7.5a2.25 2.25 0 00-2.25-2.25h-.75m-6 3.75l3 3m0 0l3-3m-3 3V1.5m6 9h.75a2.25 2.25 0 012.25 2.25v7.5a2.25 2.25 0 01-2.25 2.25h-7.5a2.25 2.25 0 01-2.25-2.25v-.75"
/>
</svg>
) : (
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
className="w-6 h-6"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M11.25 9l-3 3m0 0l3 3m-3-3h7.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
)}
</IconButton>
</div>
<Collapse open={openNav}>
<NavHeader />
</Collapse>
</Navbar>
);
}이제 홈페이지에서 마음에 드는 UI를 가져와 그대로 사용하면 잘 기능하는 것을 알 수 있다.
굿! 🙂
시스템 개발에 시간을 아끼지 말자