TailwindCSS 반영 안될 때

문제

1. 커스텀 스타일링을 위해 tailwind.config.js를 수정해도 변함이 없을 때
2. 환경은 모듈을 설치한 환경에서 작동 CDN 사용 X

---

해결방법

터미널을 통해 아래 코드 입력하면 된다. 주의사항은 본인의 파일 디렉토리에 맞게 경로를 수정해야 함.

npx tailwindcss -i ./global.css -o ./dist/output.css --watch

해당 프로젝트는 tailwind.config.js와 global.css의 경로가 같은 위치에 있고 최종 output.css는 /dist 폴더 하위에 존재했다.

과정

tailwind는 CSS-in-JS이기 때문에 변경사항이 CSS로 빌드되어야 한다.

npx tailwindcss

tailwindCSS를 실행하는 명령어

-i ./global.css

-i는 입력 파일을 지정한다. global.css에서 @tailwind의 지시어를 읽고 설정파일인 tailwind.config.js에서 정의된 css를 생성한다.

-o ./dist/output.css --watch

-o는 출력 파일 경로를 지정한다. tailwind에서 빌드된 css를 해당 경로로 저장한다.

--watch는 파일 변경을 감지하고 자동으로 다시 빌드한다.