[React] Vite+React-TS 프로젝트에서 Tailwind CSS 설정 문제 해결하기

 

 

vite + react-ts 프로젝트에서 tailwindcss 관련 설정을 다 마쳤는데도, tailwindcss가 먹지 않는 것을 발견했다. 

Postcss 문제 때문인가 했는데 그것도 아니었고.. 아마도 vite랑 tailwindcss 신버전(4.0)이랑 뭔가 호환이 잘 되지 않는 문제인 것으로 예상해 본다. 

Tailwind CSS가 4.0 버전으로 업데이트되면서 PostCSS 플러그인 구조가 변경되었고, 이로 인해 기존 설정 방식이 제대로 작동하지 않는 것 같은데..

 

스택오버플로우에서 본 대로 따라하니 해결되어서 해결 방법을 공유한다.

---

해결 방법

 

1. Tailwind CSS의 next 버전 설치

> Tailwind CSS의 다음 버전(next)과 Vite 통합 패키지를 설치했다.

yarn add tailwindcss@next @tailwindcss/vite@next

 

 

 

2. vite.config.ts 파일 수정

> vite.config.ts 파일에 기존 PostCSS 설정 대신 Vite 플러그인 형태로 Tailwind를 설정했다. 

import { defineConfig } from 'vite';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
  plugins: [tailwindcss()],
});

 

 

 

3. CSS 파일 수정

> 메인 CSS 파일(index.css)에 기존의 @tailwind base; @tailwind components; @tailwind utilities; 지시어 대신

간단히 import 구문을 사용했다.

@import 'tailwindcss';

 

위 설정을 적용한 후 Tailwind CSS가 드디어 제대로 작동하기 시작했다!!! 

 

 

cf. 위 방법은 Tailwind CSS의 개발 버전(next)을 사용하기 때문에, 프로덕션 환경에서는 안정성을 고려해야 한다!

 

---

 

참고 : https://stackoverflow.com/questions/79241624/integrating-tailwind-v4-alpha-with-vite-postcss-config