Next.js에서 Tailwind CSS가 작동하지 않는 문제를 해결하는 방법

Tailwind CSS가 Next.js 프로젝트에 스타일을 적용하지 않는 문제가 발생하는 경우 이 가이드에서 문제 해결 방법을 안내합니다. 설치, 문제 해결 및 잠재적인 수정 사항을 단계별로 다루겠습니다.

1단계: .next 폴더, node_modules 및 package-lock.json 삭제

시작하기 전, Tailwind CSS가 설치 후에도 제대로 작동하지 않는 경우 새로 설정하면 문제가 해결될 수도 있습니다.

다음 파일과 폴더를 삭제합니다.

• 다음 폴더(Next.js 빌드 파일 저장)
• node_modules 폴더(프로젝트 종속성 저장)
• package-lock.json 파일(일관된 설치 보장) rm -rf .next node_modules 패키지-lock.json ### 2단계: 종속성 다시 설치 위 파일을 삭제한 후에는 프로젝트 종속성을 다시 설치하여 새로 설치해야 합니다.

다음 명령을 실행하여 node_modules를 다시 설치하고 package-lock.json을 다시 생성하십시오.

npm 설치
npm 실행 개발

3단계: Tailwind CSS 설정 확인

다음 단계에 따라 Tailwind CSS를 올바르게 설치했는지 확인하세요.

Tailwind CSS를 설치합니다.

npm install -D tailwindcss postcss 자동 접두사
Tailwind 초기화:

npx tailwindcss init -p
tailwind.config.js 및 postcss.config.js 파일이 생성됩니다.

tailwind.config.js 구성: 프로젝트 파일을 포함하도록 콘텐츠 경로가 올바르게 설정되었는지 확인하세요.

tailwind.config.js에 추가하세요.

module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

postcss.config.js 추가

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

CSS에 Tailwind 추가: globals.css 파일(일반적으로 스타일에 있음)에 다음을 추가합니다.

CSS global.css 또는 index.css에서 사용

@tailwind base;
@tailwind components;
@tailwind utilities;

4단계: 일반적인 문제 및 수정 사항

• 위 단계를 수행한 후에도 여전히 문제가 발생할 수 있습니다. 다음은 몇 가지 일반적인 문제 및 수정 사항입니다.

• PurgeCSS 문제: PurgeCSS가 프로덕션 빌드 중에 스타일을 제거하지 않는지 확인하세요. tailwind.config.js에서 올바른 경로를 확인하세요.

• CSS 충돌 확인: 다른 CSS 프레임워크나 맞춤 스타일을 사용하는 경우 Tailwind와 충돌할 수 있습니다. 스타일 재정의를 확인하여 Tailwind가 제대로 로드되었는지 확인하세요.

• 개발 모드: Tailwind 스타일이 업데이트되지 않으면 브라우저 캐시를 지우거나 개발 서버를 다시 시작해 보세요.

위 내용은 Next.js에서 Tailwind CSS가 작동하지 않는 문제를 해결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!