tailwind CSS 작동 원리

개요

기존 프로젝트에 Tailwind CSS 사용 이유로는 디자인의 일관성을 유지하여 재활용성을 높였고, 커스텀 디자인 작업 시간을 단축하기 위해 적용했었습니다.

그리고 더 풀어서 설명하자면 Tailwind CSS는 미리 세팅된 유틸리티 클래스를 활용하는 방식으로 HTML 코드 내에서 스타일링을 할 수 있기 때문에 빠른 작업 속도와 간결한 작성으로 css 를 구성하기 좋다는 장점이 있습니다.

그런데 면접 질문 중에 tailwind CSS의 동작 원리에 대해서 질문이 들어왔는데 이제까지 Tailwind CSS 프레임워크를 npm을 통해 다운 받고 바로 사용하였기 때문에 동작 원리에 대해서는 생각해보지 못한 것 같아서 정리해볼려고 한다.

동작 원리

1. 유틸리티 클래스를 통해 필요한 스타일을 클래스를 통해 작성합니다.
2. JIT(Just-In-Time) 컴파일를 사용하여 필요한 스타일을 실시간으로 생성해줍니다. 그래서 프로젝트에서 사용하는 클래스만 즉석으로 CSS로 생성되기 때문에 빌드 성능이 빠르고 최종 파일의 크기가 줄어듭니다.
3. Purge 기능은 최종 빌드 시 사용하지 않는 CSS를 제거하여 파일 크기를 최소화합니다. 이렇게 해서 실제 사용된 클래스만 적용되어 결과물이 가벼워집니다.

결론

이렇게 정리하고 보니 Tailwind CSS의 동작 원리에 대해서 질문이 들어오면 기존의 했던 작업대로 유틸리티 클래스를 통해서 스타일을 클래스에 작성해서 CSS를 구성한다고 답변하면 될 것 같다.