[React][Error] tailwind css 설치 오류

문제 상황

---

styled-component에서 tailwind-css로 마이그레이션을 하기 위해 tailwind-css를 아래와 같이 설치했는데, ▼

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

 

아래와 같은 문제가 발생했다. ▼

npm error could not determine executable to run
npm error A complete log of this run can be found in: [필자의로그].log

 

 

해결

---

문제를 해결하기 위해 구글링을 해본 결과, Reddit에서 해결 방법을 구할 수 있었다. ▼

From the reactjs community on Reddit

 

해결 방법은 비교적 간단한데, 아래의 명령어로 설치를 하면 된다. ▼

npm install -D tailwindcss@3.4.17 postcss autoprefixer

*이 부분은 근본적인 해결방법이 아닙니다! 아래의 2025/10/05 추가 내용을 확인해주세요.*

 

문제의 원인 (2025/10/05 내용 추가)

---

댓글로 하영창님께서 내용을 추가해주셨습니다. ▼

현재 Tailwind는 4.x 버전이 기본이며, 기존 3.x 버전과 구조가 크게 다릅니다.

npx tailwindcss init 명령은 4.x에서 제거되었고, 대신 CLI가 @tailwindcss/cli 패키지로 분리되었습니다.

따라서 4.x 기준으로는 별도의 init 과정 없이 src/input.css에 다음 한 줄을 추가하면 됩니다.

@import "tailwindcss";

 

Tailwind가 3.x 버전에서 4.x 버전으로 넘어가면서 꽤 많은 것이 바뀌었습니다. 대표적인 것으로 tailwindconfig가 사라지고 css로 스타일 설정을 하는 것이 있습니다. 그렇게 여러 가지 부분에서 바뀌게 되었는데, 그 중 init 과정도 바뀌게 되면서 위의 문제가 발생하는 것이라고 합니다. (`npx tailwindcss init 명령은 4.x에서 제거되었고, 대신 CLI가 @tailwindcss/cli 패키지로 분리되었습니다.`)

 

기존의 `npx tailwindcss init`은 Tailwind 3.x의 초기화 방식인데, Tailwind가 기본적으로 4.x 버전을 사용하면서 해당 초기화 방식이 맞지 않게 된 것입니다. 그래서 제가 언급한 방식으로 3.x 버전을 강제하여 초기화하는 방법이 통했던 것입니다.

 

하지만 그건 어디까지나 임시방편으로 해결되는 방법이고, 문서에서 명시한대로 초기화되면 근본적인 문제 해결이 됩니다. 4.x 기준으로는 별도의 init 과정 없이 src/input.css에 `@import "tailwindcss";`를 추가해주면 해결이 된다고 합니다.