[설계 문서] 서비스에 최적화된 TailwindCSS 4.0 선택하기

이번 TailwindCSS 4.0 선정 과정을 통해 유틸리티 퍼스트 접근 방식이 빠른 프로토타이핑과 일관된 스타일링에 얼마나 효과적인지 다시 확인할 수 있었습니다. 기존에는 styled-components가 더 익숙한 상황이었는데, 다른 스타일링 라이브러리와 비교하며 초기 개발 속도, 유지보수성, 성능 관점에서 TailwindCSS의 장점을 명확히 이해하고 해당 기술으로 선정하게 되었습니다. 이번 경험을 통해 서비스 요구사항에 맞는 프론트엔드 기술 선택이 프로젝트 효율과 안정성에 직결됨을 배웠습니다.

---

3. Tailwind CSS 4.0

3-1. 선정 이유

• Tailwind CSS는 유틸리티 퍼스트 CSS 프레임워크로, 클래스 단위로 스타일을 조합하는 방식이기 때문에 빠른 UI 구현과 유지보수가 용이합니다.
• 별도의 스타일 파일 없이 컴포넌트 내부에서 직접 스타일을 선언할 수 있어 컴포넌트 중심 개발 방식과 매우 잘 어울린다는 장점이 있습니다.
• JIT 컴파일 방식을 통해 실제 사용된 클래스만 빌드되어 불필요한 CSS를 제거하고 성능을 향상시킬 수 있습니다.

→ 특히 튜닝 서비스처럼 반복적인 카드 UI, 피드 기반 콘텐츠, 모바일 대응이 중요한 서비스에서는 빠르게 레이아웃을 구성하고 유지보수할 수 있다는 점에서 매우 효과적인 방법입니다.

Utility-First CSS 프레임워크란?
: 화면을 구성하기 위해서 작고 재사용 가능한 단일 목적의 클래스(유틸리티 클래스)를 제공하는 스타일링 방식을 의미합니다. CSS 파일을 따로 작성하지 않고 미리 정의된 짧은 클래스를 조합해 디자인을 만드는 방법으로, 대표적으로 TailwindCSS가 있습니다.

/* 전통적인 css 방식 */
.card {
  width: 300px;
  padding: 16px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
<div class="card">내용</div>

/* Utility-first 방식 */
<div class="w-72 p-4 bg-white rounded-lg shadow">
  내용
</div>​

 

---

3-2. 스타일링 라이브러리 비교

항목	Tailwind CSS	Styled-components	Emotion	SCSS
초기 개발 속도	매우 빠름	느림	느림	보통
스타일 일관성	클래스명 기반 → 매우 높음	컴포넌트 단위	컴포넌트 단위	변수 / 믹스인 필요
퍼포먼스	JIT 컴파일로 빠름	런타임 적용 → 느릴 수 있음	런타임 적용 → 느릴 수 있음	비교적 빠름
유지보수	명확한 클래스 네이밍 → 높음	컴포넌트화 필요	컴포넌트화 필요	CSS 분리로 인해 낮음

튜닝은 빠른 프로토타이핑, 스타일 일관성, 성능 최적화가 모두 중요한 서비스입니다. 따라서 JIT로 컴파일을 하며 초기 개발 속도가 매우 빠른 Tailwind CSS가 가장 적합하다고 생각되어 선정하게 되었습니다.

JIT(Just-In-Time) 컴파일이란?
: 필요한 순간에 필요한 코드만 즉석에서 컴파일하는 방식을 의미합니다. 기존 Pre-compiled 방식은 미리 모든 가능한 유틸리티 클래스를 CSS로 생성해두고 필요 없는 것들은 빌드 과정에서 제거하는 방식이였다면, JIT는 반대로 실제 HTML이나 JSX에서 사용한 유틸리티 클래스만 즉각적으로 생성하기 때문에 빠른 속도를 제공합니다.

---

3-3. 버전 선택 - Tailwind CSS 4.0

항목	Tailwind CSS 3.4.1	Tailwind CSS 4.0
JIT 컴파일	기본 지원	새 엔진으로 빌드 속도 5배 향상
shadcn/ui 호환성	기본 지원	공식 지원
CSS Nesting	미지원 (PostCSS 필요)	기본 지원
컨테이너 쿼리	플러그인 필요	기본 내장
설정 방식	tailwind.config.js	CSS 기반 설정도 가능 (@config)
최신 CSS 지원	일부 기능 제한	@property, @scope, color-mix() 등 지원
브라우저 타겟	IE 포함	최신 브라우저 전용 (Chrome 111+, Safari 16.4+)

왜 Tailwind CSS 4.0이 우리 서비스에 더 적합한가?

• Tailwind CSS 4.0은 새 빌드 엔진을 도입해 기존보다 최대 5배 빠른 컴파일 성능을 제공하며, `@scope, @property, color-mix()` 같은 최신 CSS 스펙을 기본으로 지원합니다.
• 특히 반응형 대응이 중요한 모바일 중심 UI와 빠른 반복 개발이 필요한 채팅 구조에서는 유틸리티 기반 스타일링의 장점을 극대화할 수 있습니다.
• 또한 shadcn/ui와 공식적으로 호환되는 가장 최신 버전으로 디자인 시스템 커스터마이징과 확장이 유리합니다. Next.js 기반 SSR 환경에서도 좋은 성능을 낼 수 있어 4.0 버전을 선택했습니다.