TailwindCSS, 개발자 도구에서 적용이 안 되는 이유

 

 

문제점

html+css+js를 배웠던 시절 

css의 경우 f12을 눌러 개발자모드에서 변경을 하면 바로 적용이 됐기 때문에

이번 tailwindCss도 비슷한 거라 생각했다.

 

하지만 이상하게 gap-5를 주려는데 gap-5가 적용이 안되던 것

다른 gpa-2는 잘만 적용이 되는데 왜 5는 적용이 안되는걸까?

 

 

문제 발생 이유

그건 TailwindCss는 JIT(Just-In-Time)방식을 사용하기 때문이다.

쉽게 말하자면 내가 gap-2를 쓰고 빌드를 했다면

gap-2 css는 생성되지만 gap-5 css는 생성되지 않는다.

 

빌드 시 내가 class에 넣어서 썼던것들만 css로 생성된다는 것이다.

 

 

생성된 Css 보는 곳

생성된 css는_next/static/css/...에서 확인할 수 있다.

 

다음에 보면 내가 사용했던 빌드 시점에 사용했던 tailwindCss들이

css로 생성 되어있다.