[FE] Vite + React + TypeScript + tailwindcss 개발환경 세팅 방법

원래는 주로 Vue.js를 사용해서 개발을 했었는데, 이제 다시 React와 TypeScript를 사용해서 프로젝트를 진행하는 일이 많아졌다.

 

그런데 오랜만에 새로운 프로젝트를 하기 위해서 tailwindcss를 설치하는데

분명 전에 tailwindcss를 사용하기 위해 설치를 할 때는 발생하지 않았던 오류들이 발생했다.

tailwindcss가 적용이 안 되는 문제도 있었고, 기본적으로 제공하는 CSS는 적용이 되지만 커스텀한 내용이 적용이 안 되는 일도 있었다.

 

앞으로 Vite + React + TypeScript + tailwindcss를 사용하여 프로젝트나 공부를 할 경우가 많아질 거 같으니,

나중에 또 삽질을 하지 않고 개발환경 세팅을 해낼 수 있도록 기록을 해보아요 ㅎuㅎ

---

일단 나는 npm을 사용할 것이다.

 

보통 개발환경 세팅을 하기 위해서는 Google에서 찾아보거나 GPT의 도움을 많이 받을 것이다.

근데 tailwindcss 버전 업데이트 이후, 문제가 생긴 거 같다.

 

내가 해본 방법은 다음과 같다.

---

📌 Vite + React + TypeScript + tailwindcss 개발환경 세팅

1. 새 프로젝트 생성

• Vite를 통해 React + TypeScript 프로젝트 생성한다.

npm create vite@latest **프로젝트명** -- --template react-ts
cd **프로젝트명**
npm install

 

 

2. Tailwind 3.x 설치

• 4버전 업데이트 이후, 나한텐 오류가 발생해서 안정되어 있는 버전인 3.x 버전으로 설치했다.

npm install -D tailwindcss@3 postcss autoprefixer
npx tailwindcss init -p

 

• 여기까지 진행하면 파일 구조는 다음과 같다.

 

 

3. 설정 파일 수정

• 다음 파일들을 아래와 같이 수정한다.

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        primary: '#123123'
      } // 이 부분은 tailwindcss custom test를 위한 코드
    },
  },
  plugins: [],
}

 

 

postcss.config.js

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

 

4. CSS 설정

src/index.css

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

 

5. tailwindcss Test

src/App.tsx

import './App.css'

function App() {
  return (
    <div className="min-h-screen flex items-center justify-center bg-primary">
      <h1 className="text-3xl font-bold text-white">Tailwind is working!</h1>
    </div>
  );
}

export default App;

 

6. 서버 실행

npm run dev

 

실행 결과가 다음과 같으면 성공이다.

실행결과

---

추가로 vscode를 통해 개발을 한다면 다음 확장팩을 설치하는 것을 추천한다.

 

이걸 설치하면 왜 좋냐 !

tailwindcss는 css처럼 자동완성이 기본 제공되지 않는데, 이걸 설치하면 자동완성을 도와줘서 개발 속도가 훨씬 빨라진다는 사실 ~

 

App.tsx이 이렇게 보인다면 제대로 확장팩이 동작하고 있는 것이다!

적용이 안된다면 vscode를 껐다가 다시 키는 것을 추천하며, 이만 뿅