Tailwind CSS v4 적용 후기 - SCSS, Styled-components와 비교

프론트엔드 개발을 하면서 CSS 스타일링 방식은 정말 다양하게 변해왔다. SCSS로 시작해서 styled-components를 거쳐, 이번 포트폴리오 프로젝트에서는 Tailwind CSS v4를 적용해봤다. 각각의 방식을 경험하면서 느낀 점들을 정리해보려 한다.

기존 스타일링 방식들

SCSS 시절

1// components/_button.scss
2.btn {
3  &--primary {
4    background-color: $color-primary;
5    &:hover {
6      background-color: darken($color-primary, 10%);
7    }
8  }
9  &--large {
10    padding: $spacing-lg $spacing-xl;
11  }
12}

SCSS는 변수, 믹스인, 네스팅 등 강력한 기능을 제공했다. 하지만 BEM 네이밍 컨벤션을 지키려다 보면 .block__element--modifier 같은 클래스명이 점점 길어지고, 파일이 분리되어 있어 컴포넌트와 스타일 사이를 왔다갔다 해야 했다.

Styled-components 시절

1const Button = styled.button<{ variant: 'primary' | 'secondary' }>`
2  background-color: ${({ variant, theme }) => 
3    variant === 'primary' ? theme.colors.primary : theme.colors.secondary};
4  padding: ${({ theme }) => theme.spacing.md};
5  
6  &:hover {
7    opacity: 0.9;
8  }
9`;

CSS-in-JS의 등장으로 컴포넌트와 스타일이 한 파일에 있게 되었다. 동적 스타일링도 props로 깔끔하게 처리할 수 있었다. 하지만 런타임에 스타일을 생성하다 보니 성능 이슈가 있었고, 번들 사이즈도 커졌다.

SCSS vs Tailwind v4

구분	SCSS	Tailwind v4
파일 관리	별도 `.scss` 파일 필요	컴포넌트 내 인라인
네이밍	BEM 등 컨벤션 고민	클래스명 고민 없음
빌드 설정	node-sass 또는 dart-sass 필요	PostCSS 기반 간단 설정
변수 관리	`$변수` 문법	CSS 변수 네이티브 지원
재사용성	믹스인, 함수 정의	`@apply` 또는 컴포넌트화
유지보수	파일 찾아다니며 수정	해당 컴포넌트에서 바로 수정

SCSS에서 가장 불편했던 건 컨텍스트 스위칭이었다. 버튼 스타일을 수정하려면 Button.tsx → _button.scss → 다시 Button.tsx... 이 과정이 생각보다 피로했다.

Styled-components vs Tailwind v4

구분	styled-components	Tailwind v4
스타일 생성	런타임 (JS 실행 시)	빌드 타임 (CSS 파일)
번들 사이즈	라이브러리 + 생성된 스타일	사용한 유틸리티만 포함
동적 스타일	props로 자유롭게	조건부 클래스 조합
SSR 지원	별도 설정 필요	그냥 됨
타입 지원	테마 타입 확장 번거로움	클래스명 자동완성
러닝커브	CSS 알면 쉬움	유틸리티 클래스 암기 필요

styled-components의 동적 스타일링은 정말 편했다. 하지만 ${props => ...} 이 많아지면 가독성이 떨어졌고, 테마 타입을 확장하는 것도 꽤 번거로웠다.

Tailwind v4 세팅, 순탄치 않았다

솔직히 말하면 Tailwind v4 적용 과정이 쉽지 않았다. 특히 초기 세팅에서 여러 충돌 이슈를 겪었다.

겪었던 에러들

1"Unknown at rule @tailwind"
2"Cannot apply unknown utility class"  
3"PostCSS plugin tailwindcss requires PostCSS 8"
4"The `content` option in your Tailwind CSS configuration is missing"

주요 이슈와 해결

1. PostCSS 버전 충돌

기존 autoprefixer, postcss-preset-env와 버전이 안 맞았다. 모든 PostCSS 관련 패키지를 최신으로 업데이트해서 해결했다.

1npm install -D postcss@latest autoprefixer@latest tailwindcss@latest

2. Vite 빌드 도구 호환

v4 초기엔 Vite 플러그인 지원이 불안정했다. @tailwindcss/vite 플러그인 정식 출시 후 안정화되었다.

1// vite.config.ts
2import tailwindcss from '@tailwindcss/vite';
3
4export default defineConfig({
5  plugins: [react(), tailwindcss()],
6});

3. 다른 라이브러리 CSS와 충돌

UI 라이브러리의 CSS와 Tailwind의 우선순위 문제가 있었다. @layer 지시어로 cascade 순서를 조정했다.

4. IDE 자동완성 불안정

v4 출시 초기엔 VS Code IntelliSense가 제대로 안 됐다. Tailwind CSS IntelliSense 확장 업데이트로 해결했다.

삽질 끝에 얻은 것

세팅하는 데 반나절은 쓴 것 같다. 하지만 한번 잡아놓으니 그 뒤로는 정말 편했다. 에러 메시지 검색하고, GitHub Issue 뒤지고, 공식 문서 읽고... 그 시간이 아깝지 않을 정도로 개발 속도가 빨라졌다.

Tailwind v4의 새로운 점

v3에서 v4로 오면서 많은 것이 바뀌었다.

CSS-first 설정

1/* tailwind.config.js 없이 CSS에서 바로 설정 */
2@import "tailwindcss";
3
4@theme {
5  --color-primary: #7c3aed;
6  --font-display: "Pretendard", sans-serif;
7}

더 이상 JavaScript 설정 파일이 필수가 아니다. CSS 안에서 테마를 정의할 수 있다.

네이티브 CSS 변수

1/* 자동으로 CSS 변수로 변환 */
2.btn {
3  background-color: var(--color-primary);
4}

빌드 성능 향상

Oxide 엔진으로 빌드 속도가 대폭 개선되었다. Rust 기반의 새로운 엔진으로, 특히 대규모 프로젝트에서 체감된다.

실제 사용 후기

👍 좋았던 점

1. 개발 속도

생각하는 대로 바로 스타일링할 수 있다. "여기 패딩 좀 넣어야지" → p-4 끝.

2. 일관된 디자인 시스템

정해진 스케일(spacing, colors 등)을 쓰다 보니 자연스럽게 일관성이 유지된다.

3. 반응형이 쉽다

1<div className="text-sm md:text-base lg:text-lg">
2  반응형 텍스트
3</div>

미디어 쿼리 따로 안 써도 된다.

4. 다크모드 간편

1<div className="bg-white dark:bg-gray-900">
2  다크모드 지원
3</div>

이게 끝이다.

👎 아쉬운 점

1. 클래스명이 길어진다

1<button className="px-4 py-2 bg-violet-600 hover:bg-violet-700 text-white font-medium rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed">
2  버튼
3</button>

가독성이 떨어질 때가 있다. cn() 유틸리티로 줄바꿈하거나 컴포넌트화해서 해결한다.

2. 초반 러닝커브

유틸리티 클래스를 어느 정도 외워야 한다. justify-between이었나 justify-space-between이었나... 처음엔 자주 헷갈렸다.

3. 디자인 시스템 벗어날 때

py-[13px] 같은 arbitrary value를 쓰게 되면 Tailwind의 장점이 퇴색된다. 가능하면 정해진 스케일을 사용하는 게 좋다.

마치며

세 가지 스타일링 방식을 모두 경험해본 결과, 각각의 장단점이 명확했다.

SCSS: 대규모 팀에서 체계적인 스타일 관리가 필요할 때
styled-components: 동적 스타일링이 많고 테마 시스템이 중요할 때
Tailwind: 빠른 개발과 일관된 디자인 시스템이 필요할 때

개인 프로젝트나 빠른 프로토타이핑에는 Tailwind가 확실히 생산성이 좋다. 세팅의 고통만 넘기면 그 뒤로는 정말 편하다.

다음 프로젝트에서도 Tailwind를 쓸 것 같다. 이미 손에 익어버렸다.

Menu