Tailwind 카테고리 실패 이유는 무엇인가요?

Question

처음에는 Tailwind를 사용하기 시작했고 현재는 JavaScript로만 사용하고 있습니다. 첫날에는 클래스 이름이 모두 제대로 작동했지만 다음 날 VSCode에서 프로젝트를 열었을 때 이전에 추가된 Tailwind 클래스 이름만 여전히 작동했습니다. HTML에 더 많은 클래스 이름과 디자인을 추가하려고 해도 아무 일도 일어나지 않습니다.

예를 들어 h2 태그에 text-3xl를 추가하면 텍스트 글꼴 크기가 변경되지 않습니다. 또한 텍스트에 새 색상을 추가하거나 배경색을 추가해도 적용되지 않습니다.

Github에 있는 모든 코드와 파일에 대한 링크

<div class="flex flex-col md:w-1/2">
  <h2 class="text-center text-3xlfont-bold md:text-left">회사의 전반적인 진행 상황을 추적</h1>
  <p class="text-center md:text-left mt-4 mb-6">일상 작업이 더 넓은 비전에 어떻게 부합하는지 이해하세요. 마일스톤 수준부터 가장 작은 세부사항까지 진행 상황을 추적하세요. 다시는 더 큰 그림을 놓치지 마세요. </p>
</div>

Answer 1

Tailwind는 출력 CSS 파일에 모든 유틸리티 클래스를 포함하지 않습니다. 대신, 빌드 프로세스 중에 코드에서 사용하는 클래스를 구문 분석하고 해당 클래스만 출력 파일에 추가합니다.

따라서 코드에 클래스를 추가하는 경우 수동으로 또는 빌드 명령에 --watch 옵션을 포함하여 빌드 프로세스를 다시 실행해야 합니다. 예:

으아악

참고: 이는 브라우저 개발 도구의 DOM 검사기에서 이전에 사용되지 않은 유틸리티 클래스를 추가해도 페이지 요소에 즉시 영향을 미치지 않는 이유이기도 합니다.