반응형
✔️ 필요성
Tailwind로 개발한 프로젝트에서 다음과 같은 에러가 발생하고 접속 속도가 엄청나게 오래 걸렸습니다.
cdn.tailwindcss.com should not be used in production. To use Tailwind CSS in production, install it as a PostCSS plugin or use the Tailwind CLI: https://tailwindcss.com/docs/installation
warn - No utility classes were detected in your source files. If this is unexpected, double-check the `content` option in your Tailwind CSS configuration.
warn - https://tailwindcss.com/docs/content-configuration
✔️ Tailwind CLI로 설치하기
아래의 링크에 들어가서 Tailwind CLI 방식으로 재설치합니다
Installation: Tailwind CLI - Tailwind CSS
Documentation for the Tailwind CSS framework.
tailwindcss.com
순서에 맞춰 재설치합니다. 메인 CSS 파일 이름으로 src/index.css를 사용했는데 src/input.css 으로 바뀌었네요. 이름을 바꿔줍니다.
build도 해주고 HTML의 <head> 태그 아래에 <link href="/dist/output.css" rel="stylesheet"> 도 추가해줍니다.
특별히 <head> 태그 아래에 <script src="https://cdn.tailwindcss.com"></script> 이런 script 태그가 있다면 이 부분을 꼭 지워주어야 합니다!
✔️ 문제 해결
다시 상용에 배포하니 속도도 빨라지고 warning도 사라졌어요
반응형
'프론트엔드 웹 > TailwindCSS' 카테고리의 다른 글
| [이슈해결] The `purge`/`content` options have changed in Tailwind CSS v3.0 (0) | 2022.08.19 |
|---|---|
| tailwindCSS 조건에 따라 다르게 스타일링하기 (Conditional CSS) (0) | 2021.11.12 |
| tailwindCSS 배경이미지(background-image) 없애기 (0) | 2021.10.23 |