React + MatarialTailwindCss 프로젝트 만들기

최근 마지막 개인 프로젝트를 시작하게 되었다.

혼자 홈쇼핑 사이트를 만들어 운영까지 하는것을 목표로 하는거라 프론트의 비중은 줄이고 백엔드를 중점적으로 할 계획이라 일반적인 css를 사용하기에는 무리가 있었기때문에 tailwind를 도입하기로 했다.

 

Tailwind CSS란 무엇인가

Tailwind CSS는 HTML,CSS,JavaScript를 위한 신속하고 직관적인 디자인 시스템을 제공하는 CSS프레임워크이다.

내부를 본다면 이미 만들어져있는 CSS,Js코드를 class를 통해서 불러올수 있는 프레임워크이다.

 

Tailwind CSS를 설치하는 방법

Tailwind에는 일반적인 Tailwind와 MatarialTailwind가 따로있다.

그렇기에 부트스트랩처럼 이미 만들어져있는 컴포넌트를 사용하려면 MatarialTailwind도 같이 설치를 해줘야한다.

 

우선 리액트 프로젝트를 설치하는것부터 시작하겠다.

 

1. 리액트 프로젝트를 생성

npx create-react-app 프로젝트 이름

 

 

2. tailwindcss 설치

npm i -D tailwindcss

 

3. tailwind.config.js 생성

npx tailwindcss init

 

4. tailwind.config.js 내에서 jsx파일을 인식하게 설정

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

 

5. ./src/index.css  파일에서 @Tailwind css레이어 추가

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

 

6. 이제 Matarial Tailwind 설치

npm i @material-tailwind/react

 

7. tailwind.config.js 에서 Matarial Tailwind 를 실행할수있게 설정

const withMT = require("@material-tailwind/react/utils/withMT");
 
module.exports = withMT({
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
    "path-to-your-node_modules/@material-tailwind/react/components/**/*.{js,ts,jsx,tsx}",
    "path-to-your-node_modules/@material-tailwind/react/theme/components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
});

 

8. ThemeProvider 컴포넌트를 index.js에 추가해주기

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

원래는 이렇게 되어있을건데 이것을

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "./index.css";

import { ThemeProvider } from "@material-tailwind/react";
const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
  <React.StrictMode>
    <ThemeProvider>
      <App />
    </ThemeProvider>
  </React.StrictMode>
);

 

이렇게 ThemeProvider 를 추가해준다.

 

모든 준비가 끝났다면 바로 사용이 가능하다.

 

주의해야할 점

주의해야할 점이 있는데 TypeScript를 지원하기는 하지만 상성이 잘 맞지는 않다는 점이였다.

물론 TailwindCSS만 사용한다면 문제될건 없겠지만 Matarial Tailwind를 TypeScript로 사용하게 되면 

Cannot find module '@material-tailwind/react 이런식으로 모듈을 찾지못하는 오류가 있었다.

 

StackOverflow를 찾아보니 해답은 명료했다.

material-tailwind의 경우 js로 모든게 만들어져있다보니 js > ts 로 마이그레이션을 시켜줘야하는데 방법이아직까지는 없는것으로 보인다.(못찾은것일수도 있지만)

 

나같은 경우 백엔드를 파고있는 입장에서 TypeScript를 억지로 쓸 필요는 없기에 리액트 JS로 프로젝트를 시작하기로 했다.

 

이번에는 TailWindCSS의 설치방법에 대해서 정리해보았다.

TypeScript로 구성하려다 보니 이유모를 오류로 인해 이틀이나 날려먹어서 참 한탄스럽니만 

그래도 이유도 알았으니 지금부터라도 속도를 높혀서 해볼생각이다.

 

그럼 오늘은 여기까지로 하겠다.