문제 해결 가이드

create-react-app에서 tailwindcss가 작동하지 않는 문제 해결하기

tailwindcss를 처음 사용하는데 create-react-app에서 작동하지 않는 문제에 직면한 경우 걱정하지 마세요. 이 블로그 포스트에서는 문제를 해결하고자 일반적으로 사용되는 몇 가지 해결책을 살펴보겠습니다.

react-scripts 업그레이드

create-react-app에서 tailwindcss 클래스가 표시되지 않는 경우, react-scripts의 오래된 버전으로 인한 것일 수 있습니다. 다음 명령어를 사용하여 react-scripts를 업그레이드할 수 있습니다:

npm i react-scripts@latest

content 구성 확인

tailwind.config.js 파일에서 content 구성은 처리를 위해 포함할 파일을 결정하는데 중요한 역할을 합니다. 올바른 content 경로를 지정했는지 확인하십시오. HTML 및 JavaScript 파일을 포함하여 올바른 content 구성이 되어 있는지 확인하십시오. content 구성을 다음과 같이 업데이트하세요:

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

CSS import 확인

tailwindcss 클래스를 사용하려는 JavaScript/JSX 파일에서 CSS 파일을 올바르게 import하고 있는지 확인하십시오. 다음 import 문을 사용하십시오:

import styles from "./index.css";

index.css 파일에 필요한 tailwindcss 지시어가 포함되어 있는지 확인하십시오:

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

-D 옵션 없이 tailwindcss 재설치

tailwindcss를 dev dependency로 설치한 경우 (–save-dev 플래그), -D 옵션 없이 다시 설치해 보십시오. 다음 명령어를 실행하세요:

npm install tailwindcss

autoprefixer 재설치

일부 경우에서 autoprefixer 패키지를 다시 설치하면 문제가 해결될 수 있습니다. 다음 명령어를 실행하세요:

npm install autoprefixer@^9.8.6

권장된 설정에 따르기

공식 tailwindcss 문서에서 react 애플리케이션에서 tailwindcss를 설정하는 방법에 대해 소개된 모든 단계를 따르세요. 설치, 설정 및 구성 프로세스를 지정된 대로 완료하는 것을 확인하십시오. 설정을 완료한 후 react 애플리케이션을 실행하십시오.

이러한 문제 해결 단계를 따르면 create-react-app에서 tailwindcss 작동 문제를 해결할 수 있어야 합니다. 여전히 문제가 발생하는 경우 tailwindcss 커뮤니티나 관련 포럼 및 리소스에서 도움을 요청하거나 상담해 보십시오.

참고 자료 : 

reactjs