CSS의 원칙을 깨는 Tailwind, 정말 괜찮은 걸까?

CSS의 기본 철학은 구조(HTML)와 표현(CSS)의 분리이다. 따라서 아래와 같이 HTML은 버튼이라는 의미만을 담고, 스타일은 CSS로 분리하는 것이 일반적이다. 이러한 방식은 코드의 재사용성을 높이고, 유지보수를 용이하게 하며, 스타일을 일관되게 변경할 수 있도록 한다.

//HTML
<button class="primary-btn">확인</button>

//CSS
.primary-btn {
  background-color: blue;
  color: white;
  padding: 8px 16px;
}

 

 

또한 인라인 스타일도 존재한다. 이는 HTML 내부에 스타일을 직접 작성하는 방식으로, 구조와 표현의 분리라는 장점을 살리기 어렵기 때문에 일반적으로 지양되며 많은 개발자들이 선호하지 않는다.

<button style="background-color: blue; color: white; padding: 8px 16px;">
  확인
</button>

 

Tailwind 🎨

Tailwind는 HTML에 미리 정의된 작은 단위의 클래스(utility class)를 직접 적용해 스타일을 만드는 CSS 프레임워크이다. 개발자 설문에서도 사용률 상위권을 차지하며, 현재 가장 인기 있는 CSS 프레임워크 중 하나로 평가받고 있다.

<button class="bg-blue-500 text-white px-4 py-2 rounded">
  확인
</button>

그렇다면 위와 같이 인라인 스타일처럼 작성하는 Tailwind는 CSS의 기본 철학을 무시한 것일까? 만약 그렇다면, 어떻게 이렇게 많은 개발자들의 선택을 받을 수 있었을까?

 

작동원리⚙️

우선 기본 CSS의 작동원리는 아래와 같다.

1. 브라우저가 HTML을 로드한다.

 

2. HTML 을 DOM (Document Object Model) 로 변환한다. 

 

3. 그러면 브라우저는 HTML 문서에 연결된 임베디드 이미지, 동영상, 링크된 CSS같은 대부분의 리소스들을 가져온다.

 

4. 브라우저는 가져온 CSS를 구문 분석하고 선택자 유형별로 다른 규칙을 다른 "버킷" 으로 정렬한다.

 

5. 렌더 트리는 규칙이 적용된 후에 표시되어야 하는 구조로 배치한다.

 

6. 페이지의 시각적 표시가 화면에 표시된다. (페인팅)

 

★ 쉽게 말해 ★

브라우저는 HTML을 DOM으로, CSS를 CSSOM으로 변환한 뒤 이를 결합해 화면을 그린다. 이 과정에서 CSS는 선택자(p, span)를 통해 요소를 찾고,cascade(스타일이 겹칠 때 어떤 규칙이 적용될지를 결정하는 방식), specificity(선택자의 구체성에 따른 우선순위), inheritance(부모 요소로부터 스타일이 전달되는 특성) 규칙에 따라 최종 스타일을 계산한다. 이후 박스 모델과 레이아웃 규칙에 따라 각 요소의 크기와 위치가 정해지고, 브라우저는 이를 실제 화면에 렌더링한다.

 

 

 

 

 

그럼 tailwind는 어떻게 동작할까?

1. 개발자가 HTML/JSX/TSX 등에 Tailwind 클래스를 작성한다.

 

2. Tailwind가 빌드 과정에서 이 클래스들을 분석한다.

 

3. 대응하는 CSS 규칙을 생성한다.

 

4. 브라우저는 HTML과 생성된 CSS를 읽는다.

 

5. DOM과 CSSOM을 만든다.

 

6. 클래스 선택자에 맞는 스타일을 요소에 적용한다

7.최종 레이아웃과 렌더링이 이루어진다.

겉으로 보면 HTML 안에 스타일 정보가 직접 들어가 있는 것처럼 보여 인라인 스타일과 유사해 보일 수 있다. 하지만 브라우저 관점에서 보면 이는 인라인 스타일이 아니다. Tailwind는 class 속성만을 사용하며 브라우저 입장에서는 여전히 일반적인 클래스 기반 CSS로 동작한다.

 

Tailwind는 프로젝트 파일을 스캔하여 어떤 클래스가 사용되었는지 분석한 뒤 해당 클래스에 대응하는 CSS 규칙만 생성해 최종 CSS 파일에 포함시킨다. 즉 Tailwind는 빌드 타임에 작동하는 도구이며 브라우저에서는 기존 CSS와 동일한 방식으로 해석되고 적용된다.

 

Tailwind가 많은 사랑을 받는 이유 중 하나는 JIT(Just-In-Time) 컴파일 방식을 사용한다는 점이다. 필요한 스타일을 실시간으로 생성하기 때문에 실제로 사용된 클래스만 CSS로 만들어지며 빌드 속도가 빠르고 최종 파일 크기도 줄어든다.

 

또한 Purge 기능을 통해 사용되지 않는 CSS를 제거함으로써 결과물의 크기를 최소화할 수 있다. 이로 인해 불필요한 스타일이 포함되지 않고 보다 가볍고 효율적인 결과물을 얻을 수 있다.

 

Tailwind는 왜 나왔을까❓

어느 정도 규모가 있는 개발을 진행하다 보면 CSS 파일은 점점 비대해진다. 또한 협업 과정에서는 해당 클래스가 어디에서 사용되는지 파악하기 어려워 가독성이 떨어지고, 클래스 명을 짓는 것 역시 쉽지 않다는 문제를 겪게 된다.

 

Tailwind는 이러한 문제를 효과적으로 해결한다. 유틸리티 클래스를 기반으로 필요한 스타일만 조합해 사용하기 때문에 CSS 파일이 불필요하게 커지는 것을 방지할 수 있으며 스타일이 HTML에 직접 드러나기 때문에 코드만 보아도 어떤 디자인이 적용되었는지 파악할 수 있다. 또한 의미를 고민해 클래스를 새로 정의할 필요 없이 미리 정의된 규칙을 조합해 사용할 수 있어 네이밍에 대한 부담도 줄어든다.

 

Tailwind는 기본 철학을 무시한걸까?🔍

그렇다면 Tailwind는 CSS의 기본 철학을 무시한 것일까?

이 질문에 대해 명확하게 그렇다 혹은 아니다라고 단정 짓기는 어렵다.

 

전통적인 CSS는 구조와 표현을 파일 단위로 분리하는 방식으로 관심사를 나누어 왔다. 반면 Tailwind는 이러한 분리 방식을 따르기보다는 스타일을 컴포넌트 내부에서 함께 다루며 역할 단위로 응집시키는 접근을 취한다. 즉 분리의 기준이 파일에서 컴포넌트로 이동했다고 볼 수 있다.

 

만약 구조와 표현을 분리하는 이유가 유지보수성과 확장성을 높이기 위함이라면, Tailwind는 오히려 다른 방식으로 그 목적을 달성하고 있는 셈이다. 스타일이 HTML에 직접 드러나기 때문에 코드를 읽는 것만으로도 UI를 이해할 수 있고 어디에서 사용되는지 추적하기도 쉬워진다.

 

그렇다면 Tailwind는 CSS의 기본 철학을 무시한 것이라기보다 그 철학을 다른 방식으로 해석하고 적용한 도구라고 볼 수도 있지 않을까?

 

참고🍿

https://velog.io/@kkang123/tailwind-CSS-%EC%9E%91%EB%8F%99-%EC%9B%90%EB%A6%AC

tailwind CSS 작동 원리

https://developer.mozilla.org/ko/docs/Learn_web_development/Core/Styling_basics/What_is_CSS

CSS 작동 방식 - Web 개발 학습하기 | MDN