tailwind css 오류
601
작성한 질문수 5
'tailwind'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는
배치 파일이 아닙니다.
떠서 수동으로 tailwind.config.js 파일 추가하고
index.css랑 기타 설정하고 실행했더니
ERROR in ./src/App.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./src/App.css)
Module build failed (from ./node_modules/postcss-loader/dist/cjs.js): Error: It looks like you're trying to use tailwindcss directly as a PostCSS plugin. The PostCSS plugin has moved to a separate package, so to continue using Tailwind CSS with PostCSS you'll need to install @tailwindcss/postcss and update your PostCSS configuration. at Le (C:\react\react_springboot\node_modules\tailwindcss\dist\lib.js:36:1984) at LazyResult.runOnRoot (C:\react\react_springboot\node_modules\postcss\lib\lazy-result.js:361:16) at LazyResult.runAsync (C:\react\react_springboot\node_modules\postcss\lib\lazy-result.js:290:26) at LazyResult.async (C:\react\react_springboot\node_modules\postcss\lib\lazy-result.js:192:30) at LazyResult.then (C:\react\react_springboot\node_modules\postcss\lib\lazy-result.js:436:17)
ERROR in ./src/index.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./src/index.css)
Module build failed (from ./node_modules/postcss-loader/dist/cjs.js): Error: It looks like you're trying to use tailwindcss directly as a PostCSS plugin. The PostCSS plugin has moved to a separate package, so to continue using Tailwind CSS with PostCSS you'll need to install @tailwindcss/postcss and update your PostCSS configuration. at Le (C:\react\react_springboot\node_modules\tailwindcss\dist\lib.js:36:1984) at LazyResult.runOnRoot (C:\react\react_springboot\node_modules\postcss\lib\lazy-result.js:361:16) at LazyResult.runAsync (C:\react\react_springboot\node_modules\postcss\lib\lazy-result.js:290:26) at LazyResult.async (C:\react\react_springboot\node_modules\postcss\lib\lazy-result.js:192:30) at LazyResult.then (C:\react\react_springboot\node_modules\postcss\lib\lazy-result.js:436:17)
위 오류가 뜨네요 ㅜ
답변 1
0
안녕하세요, 인프런 AI 인턴입니다. 이상영님께서 겪고 계신 Tailwind CSS 관련 오류는 주로 Tailwind CSS와 PostCSS 설정 간의 불일치에서 발생할 수 있습니다. 이 문제를 해결하기 위해 아래의 안내를 참고해 주세요.
문제 해결 방법
Tailwind CSS 및 PostCSS 업데이트
- 최신 버전의 Tailwind CSS 및 PostCSS 관련 패키지를 설치해 보세요. 다음 명령어를 터미널에 입력하여 설치합니다:
npm install -D tailwindcss postcss autoprefixer
- 최신 버전의 Tailwind CSS 및 PostCSS 관련 패키지를 설치해 보세요. 다음 명령어를 터미널에 입력하여 설치합니다:
PostCSS 설정 파일 확인
postcss.config.js파일을 생성하거나 수정하여 다음과 같이 설정이 올바르게 되어 있는지 확인하세요:
module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, }, }
Tailwind CSS 및 프로젝트 구성 파일 확인
tailwind.config.js파일을 생성하거나 열어 Tailwind CSS가 올바르게 설정되어 있는지 확인하세요.
content배열에 포함된 경로가 프로젝트 구조와 일치하는지 확인합니다.
재빌드 및 확인
- 모든 설정이 완료되었으면, 프로젝트를 중지했다가 다시 시작하여 변경 사항이 적용되었는지 확인합니다:
npm run build npm start
- 모든 설정이 완료되었으면, 프로젝트를 중지했다가 다시 시작하여 변경 사항이 적용되었는지 확인합니다:
위 방법들은 Tailwind CSS와 PostCSS를 사용하는 데 일반적인 설정 문제를 해결하는 데 도움을 줍니다. 유사한 상황에 대한 해결 방법이 포함된 다른 사용자의 질문도 참고해 보세요:
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
동일하게 실습하는데 이상하게 페이지를 찾지 못하네요..
0
72
2
22. REST 방식 컨트롤러 만들기(2), 29. 등록처리 부분 질문이 있습니다.
0
74
2
37강. 강의수업듣다 질문드립니다.
0
56
2
TodoDTO test 함수
0
80
3
강사님 오타 있음요
0
77
2
No 1. 교제(ppt) soruce 복붙 문제 의 건
0
94
4
No 1. 교제(ppt) soruce 복붙 문제 의 건
0
70
3
17강 문의드립니다.
0
44
1
카카오 연동설정이 이제 안되는거 같아요
0
187
2
8장 마지막 강의 시 오류
0
98
4
혹시 뭐가 문제인지 알 수 있나요?
0
87
2
챕터: React-Router 설정
0
58
2
백)TODO관련
0
56
2
마리아 db 설치중 포트를 이미 사용중이라고 합니다
0
109
2
이강의 듣고 소화시켰다면 몇년차 정도 개발자라고 할수 있을까요?
0
105
1
CSR , SSR 의 수요 궁금증 질문
0
81
2
섹션5부터...
0
71
1
간단한 코드 질문!!
0
59
2
tbl_todo 질문입니다
0
64
2
수업 외 질문인데 'tbl'이 무슨 의미인가요???
0
288
2
엔티티클래스에서 질문입니다
0
77
2
수정시 writer값이 삭제되는 오류
0
41
2
교안 31 오타 수정해주세요
0
62
2
쿠키에 accessToken, refreshToken을 담고, 조회 시에 undefined
0
78
1