[React] sh: tailwind: command not found

개요

지난 글에서 사이드 프로젝트 진행으로 React Native를 사용하기로 했으나 다시 논의해본 결과 React로 결정되었다. 프론트는 야매로 GPT와 함께 해 본 경험이 전부이기에 이번 기회에 공부해보고자 "코드로 배우는 리액트:회사에서 개발할 때 쓰는 리액트와 스프링 부트" 책을 보고 따라하는 중이었다. 그러던 중 발생한 문제를 기록해놓고자 해당 게시글을 작성한다.

 

 ✅  핵심 요점 

react-scripts가 내부적으로 사용하는 tailwindcss는 CLI 실행 파일(npx tailwindcss)을 제공하지 않습니다.

그러니까 tailwindcss CLI를 직접 개발자가 설치해줘야 합니다.

 

 문제상황 

npm install -D tailwindcss 했을 때 아래와 같은 문제 발생

sh: tailwind: command not found

 

 시도해본 방법 

1. latest version으로 설치

npm install -D tailwindcss@latest

2. 전체 삭제 후 다시 깔기

rm -rf node_modlues package-lock.json

npm install

npm install -D tatilwindcss

3. latest version 삭제

npm uninstall tailwindcss

 

 해결방법 

npm install -D tailwindcss@3.4.17

npx tailwindcss init -p

 

🎯  결론 

• react-scripts@5.x는 Webpack 4를 사용합니다.
• tailwindcss@4.x는 Webpack 5+ 또는 Vite 등 최신 빌드 도구에 맞춰져 있습니다.
• 따라서 tailwindcss@latest를 설치해도 실행이 제대로 되지 않거나, CLI 경로가 꼬일 수 있습니다.