React에서 tailwind css 사용하기

CRA(Create React App) 명령어를 통해서 React Project를 생성한 다음 Tailwind CSS를 사용하기 위해서는 어떻게 해야할까?

NextJS는 처음에 생성할때 옵션만주면 알아서 다 해주지만 CRA는 아쉽지만 직접 해야한다.
(Tailwind를 좋아하지는 않는다, 코드의 가독성이 떨어진다고 느끼고, class이름도 다 기억하기 어렵다ㅠㅠ 하지만 동시에 css작업 속도가 빠르다는건 또 큰 장점이다..ㅋㅋ)

Tailwind CSS 설치 및 사용하기

1. CRA 명령어를 통해서 React Project 생성하기
2. npm을 사용해 taiilwind 설치하기

npm install -D tailwindcss

3. init 명령어를 통해서 tailwind.config.js 파일 생성

npx tailwindcss init

4. tailwind.config.js 파일에 content 배열에 파일 경로를 추가하기

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
        "./app/**/*.{js,ts,jsx,tsx,mdx}",
        "./pages/**/*.{js,ts,jsx,tsx,mdx}",
        "./components/**/*.{js,ts,jsx,tsx,mdx}",

        // Or if using `src` directory:
        "./src/**/*.{js,ts,jsx,tsx,mdx}",
    ],
    theme: {
        extend: {},
    },
    plugins: [],
};

5. ./src/index.css 파일에 tailwind 레이어에 대한 지시문 추가 및 index.tsx에서 intex.css 파일 import하기 (이 부분은 default로 되어있는 부분이기는 함)

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

6. VSCode에서 unknown at rule @tailwind라는 경고문이 출력될 경우 PostCSS Language Support 익스텐션 설치

7. 테일윈드 사용하기

export default function App() {
  return (
    <h1 className="text-2xl font-bold text-red-500">
      Tailwind Test
    </h1>
  )
}

8. 만약 스타일이 안변한다면, 서버를 껐다가 다시 npm run start 해보자.

참고

• [React] React에서 Tailwind CSS 사용하기