강의

멘토링

커뮤니티

Cộng đồng Hỏi & Đáp của Inflearn

Hình ảnh hồ sơ của seohyeonidaya9934
seohyeonidaya9934

câu hỏi đã được viết

Tạo website công ty của riêng bạn với React, Node.js, MongoDB: Hướng dẫn hoàn hảo

Ch1-3. Cài đặt các tiện ích mở rộng hữu ích cho VS Code

tailwind 설치 명령어 관련 질문

Đã giải quyết

Viết

·

42

·

Đã chỉnh sửa

0

안녕하세요! 강의 노션에서는

image.png

이렇게 나와있는데 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

HTML/CSSjavascriptreactnode.jsmongodb

Câu trả lời 2

0

dakgangjung123님의 프로필 이미지
dakgangjung123
Người chia sẻ kiến thức

안녕하세요. 너무 늦게 답변을 드려서 정말로 죄송합니다!

또한 안내문과 실제 동작이 달라 혼란을 드려 죄송합니다. 회사 사이트 강의에서는 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 환경에서는 postcssautoprefixer 패키지가 필요하므로,

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 설치 가이드(사용하는 버전에 맞게)

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

Hình ảnh hồ sơ của seohyeonidaya9934
seohyeonidaya9934

câu hỏi đã được viết

Đặt câu hỏi