tailwind CSS npx tailwindcss init -p 에러 해결 방법

tailwind CSS npx tailwindcss init -p 에러 해결 방법

테일윈드 버전대에 따른 에러 해결 과정입니다.

개요

리액트로 tailwind CSS를 Install 하는 과정에서 npx tailwindcss init -p 명령어를 쳤을 때 아래와 같은 에러가 노출되었다.

이전까지 잘 되었던 것이 않되니까 뭔가 설정이 잘못되었나 싶었고, 로그를 봐도 사실 뭔가 뭔지 모르겠었다. 로그는 아래와 같았다.

시도한 방법

첫 번째로 gpt에 물어보고 tailwind가 있는지 확인하고, node, npm 버전 등 확인해 보았는데 문제는 해결되지 않았다. 구글에 검색을 해도 모두 npx tailwindcss init -p 명령어 입력 후 나와 같은 문제는 찾지 못했고 리액트 테일윈드 설정 에서 tailwindcss npx error로 검색해서 아래의 내용을 확인해보았다.

해결 방법

위의 이미지의 링크로 들어가면 tailwind v4에서 일어난 오류를 수정하는 방법을 알려주는데 테일윈드 4버전에서 생긴 오류로 fadytalk.com - 해결방법링크에서 해결 방법을 확인해서 수정해주었다.

1. tailwind 4버전에서는 따로 적용해야 되는 것이 있음
2. 3버전으로 인스톨하니 정상적으로 해결됨

마무리

tailwind v4버전을 사용하게 된다면 해당 링크를 참고해서 적용해주면 될 것 같다.