https://www.material-tailwind.com/docs/html/installation
Get Started with Material Tailwind - Tailwind CSS Components Library
Roots of UI/UX Design By Creative Tim Learn to Develop Intuitive Web Experiences
www.material-tailwind.com
npm install @emotion/react @emotion/styled @material-tailwind/react @mui/icons-material --save
npm install @tailwindcss/typography autoprefixer --save-dev
Material Tailwind은 Tailwind css와 meterial ui의 장점을 합쳐놓은 라이브러리라서
아이콘 사용도 가능하다.
설치 후
app -> globals.css 에서 기본 설정된 css 코드들을 아래 세줄만 남기고 지운다.
@tailwind base;
@tailwind components;
@tailwind utilities;
tsconfig.josn 수정
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"noImplicitAny": false,
"skipLibCheck": true,
"strict": false,
"forceConsistentCasingInFileNames": false,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"baseUrl": ".",
"plugins": [
{
"name": "next"
}
],
"paths": {
"*": ["./*"]
}
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"exclude": ["node_modules"],
"ts-node": {
"compilerOptions": {
"module": "commonjs"
}
}
}
tailwind.config.ts 에서 설정한다.
import type { Config } from "tailwindcss";
import withMT from "@material-tailwind/react/utils/withMT";
const config: Config = {
content: [
"./utils/**/*.{js,ts,jsx,tsx,mdx}",
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
"./components/**/*.{js,ts,jsx,tsx,mdx}",
"./app/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {},
plugins: [require("@tailwindcss/typography")],
};
export default withMT(config);
config->
material-tailwind-theme-provider.tsx 를 추가하고
"use client";
export { ThemeProvider } from "@material-tailwind/react";
layout.tsx에서 ThemeProvider로 html태그를 깜싸준다.
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import { ThemeProvider } from "config/material-tailwind-theme-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,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<ThemeProvider>
{/* @ts-ignore */}
<html lang="en">
<head>
<link
rel="stylesheet"
// 폰트어썸 라이브러리 동작할 수 있게끔 추가한거임
integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
crossOrigin="anonymous"
referrerPolicy="no-referrer"
/>
</head>
<body className={inter.className}>{children}</body>
</html>
</ThemeProvider>
);
}
'FRONTEND > Next.js' 카테고리의 다른 글
| [Next.js 14 + Supabase ] 할 일 CRUD 기능 구현 (0) | 2024.07.29 |
|---|---|
| [Next.js 14 + Supabase ] Supabase 프로젝트 생성 (0) | 2024.07.27 |
| [Next.js 14 + Supabase ] Next.js[ Typescript ] React Query (0) | 2024.07.26 |
| [Next.js 14 + Supabase ] Next.js[ Typescript ] Recoil (0) | 2024.07.26 |
| [Next.js 14 + Supabase ] Next.js[ Typescript ] Server Action,Metadata (0) | 2024.07.26 |