Inflearn brand logo image

인프런 커뮤니티 질문&답변

yoo님의 프로필 이미지
yoo

작성한 질문수

React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지

Tailwind CSS (설명란에 TailwindCSS 할인쿠폰 제공)

tailwindCss 강의중

작성

·

59

0

공식 사이트에 가니 npm tailwindcss init -p명령어가 사라졌는데 버전이 올라가서 그런건가요?

답변 4

1

짐코딩님의 프로필 이미지
짐코딩
지식공유자

안녕하세요.

아래 화면을 보시면 tailwindcss 버전을 선택하여 공식문서를 확인할 수 있습니다.

스크린샷 2025-06-20 오후 9.34.35.png.webp

 

https://v3.tailwindcss.com/docs/installation/using-postcss

위 링크로 들어가시면 설치방법을 확인할 수 있어요~!

npm install -D tailwindcss@3 postcss autoprefixer
npx tailwindcss init

0

yoo님의 프로필 이미지
yoo
질문자

이렇게 해도 안됩니다. 영상 새로 찍어서 TailwindCss 구동되게 해주세요. 설치가 안되 뒷강의들이 올 스탑 상태입니다. 제대로 된 솔루션을 주세요

0

yoo님의 프로필 이미지
yoo
질문자

설치가 안되네요 강의 버전으로 설치하려면 어떻게 해야하나요?

0

안녕하세요, 인프런 AI 인턴입니다. yoo님, Tailwind CSS 설치 과정 중 발생한 문제에 대해 안내드리겠습니다.

Tailwind CSS의 새로운 버전에서는 일부 설치 및 설정 명령어가 변경되거나 사라질 수 있습니다. Tailwind CSS의 npx tailwindcss init -p 명령어는 주로 TailwindCSS 초기설정을 위한 것인데, 버전 업데이트로 인해 해당 명령어가 공식 설치 가이드에서 빠졌을 수 있습니다. 이를 대신하여, 최신 버전의 설치 및 설정 방법을 따르는 것이 좋습니다.

Tailwind CSS의 설정 파일 생성 및 초기화는 기존 버전에서는 npx tailwindcss init -p 명령어를 통해 이루어졌지만, 새 버전에서는 다른 방식이 도입되었을 가능성이 있습니다. 이런 경우에는 다음과 같은 방법으로 설치하고 설정하실 수 있습니다:

  1. TailwindCSS 설치:
    먼저, 새로운 프로젝트에서 TailwindCSS와 필요한 도구들을 설치하세요.

    npm install -D tailwindcss postcss autoprefixer
    
  2. TailwindCSS 설정 초기화:
    그런 다음 초기 설정 파일을 생성합니다.

    npx tailwindcss init
    

이 과정에서 tailwind.config.js 파일이 생성되며, 이 파일을 통해 Tailwind CSS의 설정을 세부적으로 조정할 수 있습니다.

기존 강의 내용과 현재 공식 문서 내용이 다를 수 있는 점은 업데이트 주기 및 버전 차이 때문일 수 있으니, 최신 공식 문서를 참조하여 업그레이드된 명령어를 사용하는 것을 권장드립니다. 새로운 공식 가이드는 Tailwind CSS 설치 도큐먼트에서 확인 가능합니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

yoo님의 프로필 이미지
yoo

작성한 질문수

질문하기