## 문제상황

어느 순간부터 새로 파는 프로젝트에서 TailwindCSS 초기화가 안 되었다

```bash
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
```

명령어를 치면 init은 안하고 에러만 터진다..    
~~GPT가 이렇게 init하랬는데~~

![image](https://donghyuncc-cloudfront-aws.ncloud.sbs/ebae8c97-f2c6-4e69-bde5-10dd18e47fd3.png)

```bash
 npx tailwindcss init -p
npm error could not determine executable to run
npm error A complete log of this run can be found in
```

## 해결


테일윈드 4.0부터 설치법이 바뀌어서 조금 다른 명령어로 실행해야 한다.

## PostCSS (추천) 으로 설치하기

1 - NPM으로 의존성 설치하기
```bash
npm install tailwindcss @tailwindcss/postcss postcss
```
![image](https://donghyuncc-cloudfront-aws.ncloud.sbs/85527a1d-d94a-4b19-8d88-08ce256a6339.png
) 


2 - 루트 디렉토리에 'postcss.config.mjs' 파일 만들고 아래처럼 설정하기 
```js
export default {
  plugins: {
    "@tailwindcss/postcss": {},
  }
}
```

![image](https://donghyuncc-cloudfront-aws.ncloud.sbs/df3705ed-0f39-4b98-ba0d-95b1e7bd109d.png)


3 - 메인 css파일 위에 TailwindCSS 파일 추가하기
```css
@import "tailwindcss";
```

![image](https://donghyuncc-cloudfront-aws.ncloud.sbs/74a3832f-25b2-4232-8e3d-4ae715f22dad.png)

## VITE 전용 의존성으로 설치하기

1 - NPM으로 VITE용 의존성 설치하기
```bash
npm install tailwindcss @tailwindcss/vite
```

![image](https://donghyuncc-cloudfront-aws.ncloud.sbs/856f09ca-2b7c-4769-870e-f5f486d390f4.png)

2 - vite.config.ts 수정하기
```js
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
})
```

![image](https://donghyuncc-cloudfront-aws.ncloud.sbs/52350045-05d4-450f-9fe7-e4ec2fa36b0a.png)

3 - 메인 css파일 위에 TailwindCSS 파일 추가하기
```css
@import "tailwindcss";
```

![image](https://donghyuncc-cloudfront-aws.ncloud.sbs/74a3832f-25b2-4232-8e3d-4ae715f22dad.png)


### 끝!
![image](https://donghyuncc-cloudfront-aws.ncloud.sbs/b69bbe98-b063-4fdd-9ed0-5de1ccd01005.png)

어렵지는 않지만 최근에 업데이트된 정보라 25년 3월 기준으로 아직 GPT가 구버전 설치법을 알려준다.  

앞으로도 바뀔수 있으니 [공식 문서](https://tailwindcss.com/docs/installation/using-vite) 를 참고하도록 합시다.