[TailwindCSS] 왜 동적 className이 동작하지 않는 것일까?

기본적으로 TailwindCSS는 컴파일 단계에서 불필요한 className을 제거합니다.

• 그렇기에 justify- 이렇게 작성된 className도 제거될 것입니다.
• 또한 컴파일하는 단계에서 미리 정의된 유틸리티 className을 토대로 정해진 css 파일시트를 생성하는것이 핵심입니다.
• 즉 기본적으로는 런타임환경에서 tailwindCSS의 정해진 유틸리티 className을 dom의 class에 할당해주더라도 css 스타일 시트는 생성되지 않습니다.

그럼 동적 className은 어떻게 작동하는걸까?

예를 들어 justify-center라는 문자열을 className에 동적으로 할당해주게 되면 정상적으로 css 스타일시트가 추가되는것을 알 수 있습니다.

이렇게 완성된 형태의 유틸리티 className인 경우에는 어떻게 이게 가능한 것일까요?

이제 정확히 이해를했다... 핵심은 유틸리티 기반의 스타일시트를 생성한다는것, 이 과정이 런타임이 아니라 컴파일단계에서 이루어진다는 것 이었다..

결국 아래와 같은 과정때문에 예상한것과 다르게 동작하는 것이었다.

1. TailwindCSS는 미리 정의된 유틸리티 className이 존재한다.

2. 컴파일 단계에서 미리 정의된 유틸리티 className에 의존하는 css 스타일시트를 제거할지 말지 결정을 하게 된다.

3. 객체의 프로퍼티로 미리 완전한 className을 값으로 할당해놓은 경우에는 tailwindCSS는 이건 사용한다고 판단하고 지우지 않는다.

4. 그러나 불완전한 className으로 작성을 해놓으면 컴파일 단계에서 tailwindCSS가 알지 못하기 때문에 불필요한 styleSheet라고 생각하고 지워버린다...