Vite+Teact+TS 환경 Tailwind 미동작시

	node: v20.9.0

	"react": "^18.2.0",
	"@types/node": "^20.12.7",	
	"tailwindcss": "^3.4.3",	
	"typescript": "^5.2.2",
	"vite": "^5.2.0"
	...

먼저 Docs를 다시한번 꼼꼼히 확인한다. 1-5번 확인!

npx tailwindcss init 실행 결과로 생성된 tailwind.config.ts 파일을 수정한다 (ts, tsx 추가).

파일 확장자도 js -> ts 수정 (ts 환경이라 module에 에러밑줄이 보기싫으니깐)

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{html,js,ts,jsx,tsx}'], //ts, tsx 추가
  theme: {
    extend: {},
  },
  plugins: [],
};

vite.config.ts 수정

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

이러면 Tailwind가 정상 작동 되는것을 확인 할 수 있다.

ref
https://stackoverflow.com/questions/74987006/tailwindcss-not-working-with-vite-react