오늘의 오류는 npx tailwindcss init -p 입력 시 tailwind.config.js를 생성해야하는데 에러가 발생 중!!

1. 로컬 프로젝트에서 tailwindcss 확인하기
   npm ls tailwindcss

2. 글로벌로 설치된 tailwindcss 확인하기
   npm list -g tailwindcss

3. npx로 실행 파일 확인하기
   npx tailwindcss --version

1번

frontend@0.0.0 /Users/jiheon/real_time_chat/frontend
└── tailwindcss@4.0.2

2번

/usr/local/lib
└── (empty)

/usr/local/lib 경로에 비어있으면 글로벌로 설치가 된패키지가 없다는 것을 확인 할 수 있었다.

이를 해결하기 위해 sudo npm install -g tailwindcss를 사용하여 글로벌에 설치해준다.

/usr/local/lib
└── tailwindcss@4.0.2

글로벌에 설치된 것을 확인 할 수 있다.

추가적으로 npm list -g --depth=0 를 통해 글로벌 경로에 설치된 패키지를 확인 할 수 있다.

그럼에도 현재까지는 npx tailwindcss init -p를 통해 tailwind 설정이 제대로 이루어지지 않는다.

추가적으로 아래 과정을 거치니 sudo를 사용하지 않고 글로벌 경로에 tailwindcss 설치 시 에러가 발생하지 않는다.

• 권한 변경: npm 캐시 디렉토리의 소유권을 현재 사용자로 변경
  sudo chown -R $(whoami) ~/.npm
• 글로벌 패키지 설치 경로 변경: npm의 글로벌 패키지 설치 경로를 변경하면 권한 문제 회피 가능
  mkdir ~/.npm-global npm config set prefix '~/.npm-global'
• 그런 다음, 다음을 실행하여 환경 변수를 업데이트~/.bashrc 또는 ~/.zshrc 파일에 추가
  export PATH=~/.npm-global/bin:$PATH
• 변경 사항을 적용하기 위해 터미널을 재시작하거나 다음 명령어를 실행
  source ~/.bashrc # 또는 source ~/.zshrc
• tailwindcss 재설치: 이제 tailwindcss를 다시 설치
  npm install -g tailwindcss

결론

tailwindcss의 버전 4.0.2를 사용할 때 npx tailwindcss init -p 명령어가 작동하지 않는다...

그래서 다른 폴더에서는 이상이 없는 것을 확인하고 npm install tailwindcss@3.1.4로 다운그레이드를 진행한 후에 프로젝트 설정 명령어를 입력하니 정상적으로 작동됐다.버전 변경으로 인해서 설정하는 방법이 바뀐 것 같다.

오늘과 같은 경험을 통해 공식 문서를 챙겨봐야한다는 것을 깨달았다.

재설치

1. npm i tailwindcss @tailwindcss/vite

//vite.config.ts

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
})

3. CSS파일에 @import "tailwindcss"; 추가

   ex) index.css, global.css

tailwindCSS intellisense의 자동기능이 적용이 안되서 components.json와 tailwind.config.js를 추가해줬다가 삭제를 하니 제대로 작동되는 이유는 잘 모르겠네요...