Tailwind CSS가 가벼운 이유

Tailwind를 처음 쓸 때 신기했던 게 있다. 클래스를 아무리 많이 써도 CSS 파일이 엄청 작다는 거였다. 그냥 그런가 보다 하고 넘겼는데, 이번에 제대로 이유를 알게 되었다.

 

기존 CSS의 문제

기존 방식은 클래스 이름을 직접 짓고 CSS 파일에 스타일을 정의하는 방식이다.

.card { padding: 16px; background: white; }
.card-v2 { ... }
.card-new { ... }

시간이 지나면 이런 클래스들이 계속 쌓인다. 실제로 쓰이는지도 모르고, 지우기도 무섭고...

 

Utility-First

이를 해결하고자 한 것이 Tailwind 이다. Tailwind는 방향이 아예 다르다. 클래스 하나가 CSS 속성 하나다.

<div class="p-4 bg-white rounded-lg">

CSS 파일을 따로 쓰지않고 스타일이 HTML에 다 보인다. 클래스 이름도 고민한 필요가 없다.

 

JIT 엔진

그렇다면 왜 가벼울까? Tailwind는 빌드할 때 내 코드 파일을 전부 스캔한다. p-4, bg-white 같은 클래스를 발견하면 그것만 CSS로 만들어준다. 안 쓴 클래스는 포함하지 않는다. 이게 JIT(Just-In-Time) 엔진이다.

결과적으로 최종 CSS 파일은 내가 실제로 쓴 클래스만 담겨있어 굉장히 가볍다.

 

content 설정

JIT가 파일을 스캔하려면 어떤 파일을 봐야 하는지 알아야 한다. 그게 config의 content 설정이다.

content: [
  "./src/**/*.html",
  "./src/**/*.jsx",
]

여기 적힌 파일들만 스캔한다. 빠진 파일에서 쓴 클래스는 CSS에 포함되지 않는다.

 

동적 클래스가 안 되는 이유

JIT 원리를 알면 이게 왜 안 되는지 바로 이해된다.

// ❌ 안됨
`text-${size}-500`

// ✅ 됨
size === 'lg' ? 'text-lg' : 'text-sm'

스캔할 때 완성된 클래스명이 없으면 CSS를 만들어주지 않는다. 클래스는 항상 완성된 문자열로 존재해야 한다.