Tailwind CSS를 사용하며..

0. 테일윈드의 최적화 방식

테일윈드 css를 사용하는 웹 페이지를 까보면 막상 테일윈드를 통해 명시된 className들이 많지 않다는걸 알수있다.

이는, Tailwind CSS는 트리쉐이킹(tree-shaking)과 같은 최적화 기법을 통해 사용되지 않는 스타일을 제거하여 최종 CSS 파일의 크기를 줄인다.

 

즉 Tailwind CSS는 프로덕션 환경에서 빌드 시 불필요한 클래스들을 자동으로 걸러내어, 프로젝트에서 실제로 사용된 클래스만을 포함한 CSS 파일을 생성하는 방식으로 이루어진다.

 

1. 좀 더 살펴보기

구체적으로, 바벨(Babel)이나 Webpack과 같은 번들러가 소스 파일을 분석하여 사용 중인 className만 추출하고, Tailwind의 purge 기능을 통해 불필요한 스타일을 제거한다.

 

그 결과, 컴파일된 최종 CSS 파일은 매우 작은 용량을 유지할 수 있게되고,

이 과정을 통해 다음과 같은 장점을 얻을 수 있다.

1. 파일 크기 감소: 불필요한 스타일을 제거해 성능 최적화.
2. 빠른 로딩 속도: 가벼워진 CSS 파일로 페이지 로딩 시간 단축.
3. 자동화된 최적화: 번들링 과정에서 자동으로 최적화가 이루어져 개발자가 별도로 신경 쓸 필요가 없음.

결론적으로, Tailwind CSS는 트리쉐이킹을 통해 프로젝트에서 사용되는 스타일만 포함하여 효율적인 CSS 파일을 생성함으로써, 웹 페이지의 성능을 최적화하는데 매우 유용하다는것이다!

 

그런데, 이렇게 유용한데도 불구하고 개발자들의 호불호가 심하게 갈리는것 같다..