Tailwind CSS V4.1 알아보기 ~!

안녕하세요. 웹 OB 박희선입니다.
이번 3주차 과제에서는 CSS 라이브러리를 자유롭게 선택할 수 있었는데요, 여러분은 어떤 기준으로 선택하셨나요?

저는 Tailwind CSS를 선택했는데요, 그 이유와 더불어 최신 버전에서의 주요 변화 및 디자인 시스템 구성 방식에 대해 공유드리고자 합니다!

 

 

 

 

✅ Tailwind CSS 선택 이유

Tailwind CSS는 유틸리티 클래스 기반의 CSS 프레임워크로, 다음과 같은 이점을 제공합니다.

• 빠른 UI 개발 속도: 미리 정의된 유틸리티 클래스를 조합하여 빠르게 스타일링할 수 있습니다. CSS 작성보다 className 조합에 집중할 수 있어 생산성이 높습니다.
• 작은 번들 사이즈: 사용하지 않는 클래스는 자동으로 제거되므로, 최종 번들 크기가 매우 작습니다.
• 컴포넌트 기반 개발에 적합: 별도의 CSS 파일 없이, 컴포넌트 내부에서 바로 스타일을 지정할 수 있어 JSX 중심의 개발 흐름에 적합합니다.
• 일관된 디자인 시스템 구축: 토큰 기반의 스타일 설정을 통해 프로젝트 전반에 걸쳐 일관된 UI/UX를 유지할 수 있습니다.

---

🚀 Tailwind CSS v4 주요 변화

Tailwind CSS v4에서는 성능과 사용성 측면에서 큰 개선이 이루어졌습니다.

1. 초고속 빌드 성능
   • v3 대비 최대 100배 빨라진 빌드 속도 (Rust 기반의 새 엔진 Oxide 도입)
2. 최신 CSS 기능 기본 지원
   • @layer, @property, container queries 등 최신 CSS 스펙을 공식 지원합니다.
3. 간편한 설치와 설정
   • 단일 명령어로 설치 가능하며, tailwind.config.js 없이도 바로 사용 가능합니다.
4. 유틸리티 클래스의 자동화
   • 변수만 선언해두면, 관련 유틸리티 클래스가 자동으로 생성됩니다.
5. 디자인 토큰 관리 강화
   • @theme 블록을 통해 정의한 변수는 모든 Tailwind 유틸리티에서 바로 사용할 수 있습니다.
6. Preflight 기본 내장
   • 별도의 CSS Reset 없이도 브라우저 스타일 일관성을 확보할 수 있습니다.

---

 

 

⚙️ 설치 및 기본 설정

1. 설치

npm install tailwindcss @tailwindcss/vite

2. Vite 설정

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
  plugins: [react(), tailwindcss()],
});

3. CSS에 Tailwind import

@import "tailwindcss";

 

 

기존의 번거로운 절차 대신, CSS에 import 구문 한줄이면 프로젝트에서 적용이 가능합니다!

 

🎨 디자인 시스템 구성 방법

1. 디자인 토큰 정의: @theme

Tailwind CSS v4는 @theme 블록을 통해 CSS 변수 기반의 디자인 토큰 시스템을 구성할 수 있습니다. 이 변수들은 자동으로 유틸리티 클래스로 변환됩니다.

@import "tailwindcss";

@theme {
  --color-mint-500: oklch(0.72 0.11 178);
  --font-pretendard: 'Pretendard', sans-serif;
}

→ 이렇게 선언하면 다음과 같은 클래스를 사용할 수 있습니다:

<div class="bg-mint-500 text-mint-500 font-pretendard">Hello</div>

2. 글로벌 스타일 적용

CSS 변수로 설정한 전역 폰트 등을 body에 적용하여 전체 앱의 기본 스타일을 통일할 수 있습니다.

body {
  font-family: var(--font-pretendard);
}

3. 커스텀 스타일 추가: @layer

Tailwind는 @layer base, @layer components, @layer utilities를 통해 구조적인 커스텀 스타일 관리가 가능합니다.

base: HTML 태그 기본 스타일 재정의

@layer base {
  h1 {
    font-size: var(--text-2xl);
  }
}

components: 재사용 가능한 UI 컴포넌트 정의

@layer components {
  .card {
    background-color: var(--color-white);
    padding: var(--spacing-6);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
  }

  .h1 {
    @apply font-semibold text-[140px] leading-[150%] tracking-[-0.6%] font-pretendard;
  }
}

 

실제로 저는 이번 과제에서 재사용되는 속성들을 다음과 같이 정의해 사용하니, tailwind로 스타일을 하면 컴포넌트 내 문서 구조가 다소 지저분해졌었는데 훨씬 깔끔하게 작성할 수 있었습니다. 

 

@layer components {
  .message {
    @apply text-title-2 font-bold text-secondary;
  }

  .follows {
    @apply flex w-full flex-col items-center rounded-lg bg-primary p-2 hover:bg-secondary;
  }

  .colorDuration {
    @apply transition-colors duration-400 ease-in-out;
  }
}

 

  <div className="follows colorDuration">
          <p>Followers</p>
          <p className="text-body">{data.followers}</p>
  </div>

 

 

🧩 디자인 시스템 공유 및 확장

• 디자인 토큰과 공통 스타일을 별도의 CSS 파일에 정의한 뒤, 각 프로젝트에서 @import하여 재사용할 수 있습니다.
• 팀 내 공통 디자인 시스템을 구축하고 관리하는 데 매우 효율적입니다.

/* design-system.css */
@import "tailwindcss";
@theme {
  /* 변수 정의 */
}
@layer base, components, utilities {
  /* 공통 스타일 */
}

---

✅ 요약

Tailwind CSS v4는 최신 CSS 플랫폼을 적극 반영하면서도, 개발자 경험을 극대화한 프레임워크입니다.

• 빠른 개발 속도
• 디자인 시스템 기반의 유틸리티 구성
• Rust 엔진 기반의 고속 빌드
• @theme, @layer 기반의 구조적 스타일링
  이러한 점에서, 유지보수성과 협업 효율을 동시에 높일 수 있는 강력한 선택지라고 생각합니다.

---

 

 

 

Tailwind CSS v4로 디자인 시스템을 구성하거나 CSS 설계를 체계화할 계획이 있으시다면, 공식 문서(tailwindcss.com)의 v4 가이드를 꼭 참고해보시길 권장드립니다!!