[트러블슈팅] vite+react-ts+tailwind 작동안됨 해결

이번에 비트로 프로젝트를 생성하고 tailwind를 적용시키는데 tailwind가 적용되지 않아 삽질을 정말 많이 했다. 

공식 문서에 나온 단계로 동일한 과정을 진행했음에도 불구하고 스타일 적용이 안됐지만 결국 해결하여 이건 기록해두고 나중에도 똑같은 이슈 발생시 사용해야겠다는 마음으로 작성한다.. 구글링 진짜 많이했다..

 

👉🏻 문제상황

공식문서에서는 vite.config.ts에서 설정하라는 것이 없었는데, 구글링을 하다보니 vite를 사용하면 따로 설정을 해주어야 한다고 한다.

그래서 아래 코드를 넣어 두 라이브러리를 plugin에 추가해줬는데도 style이 적용이 안됐다..

import tsconfigPaths from "vite-tsconfig-paths";
import tailwindcss from "tailwindcss";

👉🏻 해결방법

medium에 24년에 업데이트된 버전으로 해결방법을 올려놓으신 분이 계셔서 그분 코드를 참고했는데,, 정말 한번에 해결됐다.

//vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "tailwindcss";
 
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  css: {
    postcss: {
      plugins: [tailwindcss()],
    },
  },
 
});

tailwindcss를 css part의 postcss plugin에 추가해주어야 한다! 

 

참고

https://medium.com/@rubybellekim/react-tailwind-css-is-not-working-in-vite-react-solution-2024-updated-bba56dcae003

React — Tailwind CSS Is Not Working In Vite + React Solution (2024 updated)