인프런 커뮤니티 질문&답변
작성한 질문수
tailwind 설치 명령어 관련 질문
해결된 질문
작성
·
28
·
수정됨
0
안녕하세요! 강의 노션에서는
이렇게 나와있는데 npx tailwindcss init만으로는 tailwind.config.js만 설치되고, postcss.config.js는 설치가 안되는 게 아닌가요? npx tailwind init -p 명령어를 사용해야 하는지 여쭤보고 싶습니다!
그리고 위 두 명령어만 입력해서 tailwind를 사용하려고 하니 에러가 떠서 찾아보니까
Vite가 postcss.config.js 읽다가 autoprefixer 플러그인을 불러오려고 했는데, 프로젝트에 autoprefixer 패키지가 설치되어 있지 않아서 터진 거야.
라고 하더라구요
npm install -D tailwindcss@3이 아니라
npm install -D tailwindcss@3 postcss autoprefixer 이 명령어를 사용해야 한다고 해서 사용해보니 에러가 해결된 상태입니다.
노션에 적혀있는 명령어와 달라서 여쭤봅니다!
npm install -D tailwindcss@3 postcss autoprefixer
npm install -D taiㅇindcss@3 postcss autopnpm install -D tailwindcss@3 postcss autoprefixerrefixer
답변 2
0
안녕하세요. 너무 늦게 답변을 드려서 정말로 죄송합니다!
또한 안내문과 실제 동작이 달라 혼란을 드려 죄송합니다. 회사 사이트 강의에서는 Tailwind CSS 3.4.17을 사용하고 있지만, 2025년 1월 말 Tailwind CSS 4.0이 릴리즈되면서 공식 문서가 4.0 기준으로 변경되었습니다.
Tailwind CSS 3 버전 기준에서는npx tailwindcss init 명령어로는 tailwind.config.js만 생성되며,postcss.config.js까지 함께 생성하려면 npx tailwindcss init -p를 사용해야 합니다.
또한 Vite 환경에서는 postcss와 autoprefixer 패키지가 필요하므로,
npm install -D tailwindcss@3 postcss autoprefixer와 같이 설치하는 것이 정상적인 설정 방식입니다.
질문자분께서 겪으신 에러와 해결 방법은 Tailwind CSS 3 환경에서는 올바른 접근이었고,
노션의 명령어는 최신 공식 문서(4.0 기준)를 반영하는 과정에서 생긴 차이로 이해해 주시면 됩니다.
혼란을 드린 점 다시 한 번 양해 부탁드리며, 안내 문구도 보완하도록 하겠습니다.
0
안녕하세요, 인프런 AI 인턴입니다.
seohyeon kim님께서 질문 주신 Tailwind CSS 설치 명령어에 대해 안내드리겠습니다.
Tailwind CSS 설치 시 npx tailwindcss init 명령어는 기본적으로 tailwind.config.js 파일만 생성합니다. 말씀하신 대로 postcss.config.js 파일까지 생성하고 싶다면 npx tailwindcss init -p 명령어를 사용하셔야 합니다. 이 명령어는 Tailwind CSS 설정 파일과 더불어 PostCSS 설정 파일도 자동 생성하여 줍니다. 이렇게 생성된 두 개의 설정 파일을 통해 Tailwind CSS와 PostCSS를 간편하게 설정하고 사용할 수 있습니다.
기존에 학습하셨던 방식과 다르게 설치 과정이 진행되어 혼란스러우셨다면, 공식 문서를 참고하여 최신 방법으로 설정을 진행하시는 것이 좋습니다.
다음 링크에서 관련 내용과 방법을 자세히 확인하실 수 있습니다:
- Tailwind CSS 설치 가이드(사용하는 버전에 맞게)
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.