React + TypeScript + Tailwind 설정

React + TypeScript 적용은 완료된 상태에서 TailwindCSS 를 추가 할 것이다.

Tailwind CSS란?

맞춤형 사용자 인터페이스를 빠르게 구축하기 위한 유틸리티 우선 CSS 프레임워크이다.

모든 HTML 파일, JavaScript 구성 요소 및 기타 템플릿에서 클래스 이름을 검색하고 해당 스타일을 생성한 다음 정적 CSS 파일에 작성하여 작동하기 때문에 빠른 코드작성이 가능하고, 유연하다.

다만, css파일에 묶어서 공통적으로 사용하는 것이 아니기 때문에 시각적으로 지저분해 보일 수 있다.

React 뿐만 아니라 JS, Vue, Angular 등 다양한 곳에 이용가능하다!

React에서 Tailwind를 적용하는 방법은 2가지다.

Tailwind 적용 첫번째

1) npm 파일들을 설치해준다.

$ npm install -D tailwindcss@latest
$ npm install -D postcss@latest 
$ npm install -D autoprefixer@latest
$ npm install -D postcss-loader

2) postcss.config.js 파일 생성
tailwind를 사용하기 위해서는 우리가 알고 있는 css로 변환시킬 필요가 있다. 그래서 위에서 postcss를 설치한 것이고, 설정 파일을 만들어 준다.

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

3) tailwind.config.js 파일 생성
tailwind의 연결파일과 앞으로 내가 패키지를 만들어 사용할 수 있는 설정파일이다.

npx tailwindcss-cli@latest init

나는 위에서 설치해서 생성된 파일을 이용했지만 위의 명령어를 이용하지 않고 직접 파일을 생성해도 된다.
purge 는 연결루트이다.

// tailwind.config.js
module.exports = {
  purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
  content: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

4) webpack.config.js 생성
webpack은 간단하게 말해서 여러개의 자바스크립트 파일들을 하나의 자바스크립트 파일로 묶어주는 역할이다.
tailwind를 이용하기 위하여 postcss를 이용했으므로 연결해주어야 한다.
webpack에 대한 자세한 설명은 잘 설명되어 있는 블로그를 참고해주면 좋을 듯하다.. ㅎ
webpack 정리

// webpack.config.js
module: {
    rules: [
      {
        test: /.jsx?$/,
        include: [path.resolve(__dirname, "src")],
        exclude: [path.resolve(__dirname, "node_modules")],
        loader: "babel-loader",
      },
      {
        test: /.css?$/,
        exclude: [],
        //로더는 오른쪽부터 읽어들이므로 postcss-loader를 맨 오른쪽에 넣어준다.
        use: ["style-loader", "css-loader", "postcss-loader"],
      },
    ],
  },

5) index.css 설정
tailwindcss의 base, components, utilities 스타일들이 사용될 수 있도록 import한다.

// index.css 
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

6) index.tsx 파일 연결
import './index.css' 연결하면 완료!

// index.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

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

reportWebVitals();

이렇게 해서 적용해보면 문제 없이 적용이 잘 된다!

Tailwind 적용 두번째

1) 첫번째 방법과 다른점은 craco를 이용한다는 점이다.
PostCSS-loader와 webpack을 이용하지 않고 craco에서 연결해준다.
Craco(Create React App Configuration Override)는 create-react-app(CRA)을 쉽게 설정하기 위해 만들어졌다.
자세한 설명은 참고블로그를 올려놓겠다.
https://www.howdy-mj.me/boilerplate/craco-absolute-paths-setting/

1-1) PostCSS 8을 지원하지 않는 react버전일 경우

$ npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
$ npm install @craco/craco

1-2) react 버전이 최신일 경우

$ npm install -D tailwindcss@latest
$ npm install -D postcss@latest 
$ npm install -D autoprefixer@latest
$ npm install @craco/craco

2) package.json 변경
react-scripts로 되어 있는 부분을 변경해준다.

// package.json
  {
    // ...
    "scripts": {
     	"start": "craco start",
     	"build": "craco build",
     	"test": "craco test",
      	"eject": "react-scripts eject"
    },
  }

3) craco.config.js 생성

여기서 PostCSS 연결에 필요한 부분들을 연결한다.

// craco.config.js
module.exports = {
  style: {
    postcss: {
      plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
      ],
    },
  },
}

4) tailwind.config.js 생성

첫번째연결의 3번째와 동일하다.

$ npx tailwindcss-cli@latest init

5) 나머지는 첫번째의 5번째부터 같다.

문제점

craco와 webpack의 차이를 몰랐달까...
첫번째와 두번째 방법이 섞여 끔찍한 혼종을 만들었고
오류가 터졌던 상황이 발생했다.. ㅎ
처음부터 시작하는 마음으로 npm install 되어있는 것들에서 craco를 삭제하고 순서대로 실행했더니 문제없이 작동했다.
코드는 잘못이 없었다 내 잘못이지 ㅠㅠㅠ 뭐든 차근차근 해보는 습관을 들이도록 하자!

참고사이트

• https://velog.io/@foreverchoi0706/%EB%B0%B0%EC%9B%8C%EC%84%9C-%EB%82%98%EC%A3%BC%EB%8A%94-React%EC%97%90-Tailwind-Css-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0
• https://dev.classmethod.jp/articles/add-tailwindcss-in-react/
• https://velog.io/@chosh91/Project-ReactJS-Typescript-TailwindCSS-%EC%B4%88%EA%B8%B0-%EC%84%B8%ED%8C%85
• https://tailwindcss.com/docs/guides/create-react-app