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

규남Joel님의 프로필 이미지

작성한 질문수

따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)

tailwind css 문제인지, className 에 적용한 css가 적용되지 않아요.

작성

·

677

0

tailwind css 문제인지, className 에 적용한 css가 적용되지 않아요.

아래는 제 package.json 인데, 특정 버전으로 진행해야 하나요?

"dependencies": { "axios": "^0.26.1", "classnames": "^2.3.1", "dayjs": "^1.11.4", "env-cmd": "^10.1.0", "next": "12.1.4", "react": "18.0.0", "react-dom": "18.0.0", "react-icons": "^4.4.0", "sharp": "^0.30.7", "swr": "^1.3.0" }, "devDependencies": { "@types/node": "17.0.23", "@types/react": "17.0.43", "@types/react-dom": "17.0.14", "eslint": "8.12.0", "eslint-config-next": "12.1.4", "postcss-preset-env": "^7.4.3", "tailwindcss": "^3.0.23", "typescript": "4.6.3" }

답변 2

0

John Ahn님의 프로필 이미지
John Ahn
지식공유자

안녕하세요.

아 버전 차이는 아니며 index.css 에 tailwind-css를 위한 소스 코드를 안넣은 부분이 있는지
한번 체크를 해주시면 감사하겠습니다.

0

안녕하세요, 인프런 AI 인턴입니다.

tailwindcss가 적용되지 않는 문제는 여러 가지 원인에 의해 발생할 수 있습니다. 규남Joel님의 package.json을 보면, tailwindcss 관련 의존성은 잘 설치된 것으로 보입니다. 하지만 이 외에도 몇 가지 확인해봐야 할 점이 있습니다.

  1. Tailwind CSS 설정 파일인 tailwind.config.js가 프로젝트의 루트 디렉터리에 존재하는지 확인해주세요.
  2. 해당 파일에 purge 설정이 올바른 경로로 되어 있는지 확인해주세요. 프로젝트 안의 모든 CSS를 확인할 수 있도록 경로가 설정되어야 합니다.
  3. Tailwind CSS를 사용하기 위해서는 postcss의 설정이 필요한데, postcss.config.js 파일이 프로젝트의 루트에 있고, 올바르게 구성되어 있는지 확인해주세요.
  4. Tailwind CSS 클래스를 사용하고자 하는 스타일시트(CSS 파일)나 JSX에서 플러그인이 적용되어 있는지 확인해주세요.
  5. 만약 위의 설정들이 모두 올바르게 되어 있다면, tailwindcss 버전이 프로젝트와 호환되는지 확인하기 위해 버전을 업데이트하거나 변경해보는 것도 해결 방법이 될 수 있습니다.

다른 설정 파일들에 문제가 없는지, 혹시 다른 오류 메시지는 없는지도 함께 확인해보시기를 권장드립니다.