FRONTEND/Next.js

[Next.js 14 + Supabase ] Material Tailwind 기본 설정하기

죠으닝 2024. 7. 27. 20:13

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>
  );
}