Tailwind CSS v4, 정리

어떤 주제로 블로그를 써볼까 고민하다가, 요즘 프론트엔드 개발을 하면서 거의 매일같이 쓰고 있는 Tailwind CSS에 대한 이야기를 해보면 좋겠다고 생각했습니다.

최근에 새로운 버전이 나왔다는 소식을 듣고, 기존에 사용하던 방식과 무엇이, 그리고 ‘왜’ 달라졌는지 궁금해졌습니다. 솔직히 이전 버전도 충분히 만족하며 사용하고 있었기에 큰 필요성을 느끼진 못했지만, 새로운 기술이 어떤 경험을 줄 수 있을지 호기심이 생겼습니다.

이번 글에서는 제가 이전에 사용하던 Tailwind CSS와 새로운 버전이 어떻게 다른지, 그리고 그 변화가 개발 경험에 어떤 영향을 미쳤는지에 대한 개인적인 경험을 공유해 보려 합니다.

## v4 개발 경험의 개선

이전에 사용하던 Tailwind CSS도 개발에 불편함은 없었지만, 새로운 버전이 Rust 기반의 Oxide 엔진을 도입하여 성능이 크게 향상되었다는 이야기를 듣고 직접 확인해보고 싶었습니다. 이 새로운 엔진은 기존의 PostCSS 의존성을 완전히 제거하고, Parcel 팀이 만든 Lightning CSS를 통해 CSS를 처리합니다. 이 덕분에 기술적으로 더 빠르고 가벼운 구조가 완성되었습니다.

실제로 적용해보니 개발 경험을 개선하는 몇 가지 명확한 차이를 보였습니다.

수정 사항 반영 속도: HMR(Hot Module Replacement)이 거의 즉각적으로 동작합니다. 파일을 저장하면 기다리는 시간 없이 바로 화면에서 결과물을 확인할 수 있었습니다.
진정한 제로 설정(Zero-Configuration): 가장 인상 깊었던 점 중 하나입니다. 이전에는 tailwind.config.js와 postcss.config.js 같은 설정 파일이 필수였지만, v4를 Vite 플러그인과 함께 사용하면 이조차 필요 없습니다. 심지어 @tailwind 지시어를 담을 CSS 파일을 직접 만들지 않아도, 플러그인이 알아서 기본 스타일을 주입해 줍니다. 말 그대로 설치만 하면 바로 클래스를 사용할 수 있는 경험이었습니다.

이러한 개선점들은 개발 과정에서 불필요한 시간을 줄여주고, 더 효율적인 작업 사이클을 가능하게 만드는 중요한 변화라고 생각합니다.

## 설정의 변화: `tailwind.config.js`의 작별과 CSS-first

솔직히 이전 방식은 조금 번거로운 점이 있었습니다. 테마 색상이나 폰트를 추가하려면 tailwind.config.js 파일을 열고, 실제 스타일은 CSS나 컴포넌트 파일에서 작성하는 흐름이 분리되어 있다고 느꼈기 때문입니다.

새로운 버전은 이 문제를 CSS-first 접근 방식으로 해결했습니다. 이제 모든 커스텀 설정은 CSS 파일 안에서 직접 관리하며, 별도 플러그인 없이 @import로 다른 CSS 파일을 가져오거나, CSS Nesting(중첩) 문법을 바로 사용할 수 있어 CSS 작업이 훨씬 더 유연해졌습니다.

이전 방식:

// tailwind.config.js
module.exports = {
  // content 배열을 직접 관리해야 했다.
  content: ["./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
      colors: {
        "brand-blue": "#1DA1F2",
      },
    },
  },
};

새로운 방식:

/* styles/app.css */
@import "tailwindcss";

@theme {
  --color-brand-blue: '#1DA1F2';
  --font-family-sans: "Pretendard", "sans-serif";
}

@theme를 통해 정의된 값들은 모두 네이티브 CSS 변수로 컴파일됩니다. 이는 다음과 같은 실용적인 장점을 가집니다.

브라우저에서 실시간 수정: 개발자 도구에서 직접 CSS 변수 값을 바꿔보며 디자인을 바로 확인할 수 있습니다.

JavaScript와의 유연한 연동: getPropertyValue() 와 같은 표준 DOM API로 JavaScript에서 쉽게 테마 값(색상, 폰트 크기 등)을 가져와 동적인 스타일에 활용할 수 있습니다.

모던 CSS 기능의 완전한 통합

v4는 단순히 편의 기능만 추가한 것이 아니라, 최신 웹 표준 CSS 기능들을 코어에 통합하여 CSS 자체의 가능성을 확장했습니다.

논리적 속성(Logical Properties) 기본 적용 이전에는 ml-4(margin-left)처럼 방향을 직접 지정했지만, 이제는 ms-4(margin-inline-start)와 같은 논리적 속성을 사용합니다. 이는 RTL(오른쪽에서 왼쪽으로 쓰는) 언어 환경을 별도 작업 없이 자연스럽게 지원하며, 불필요한 클래스를 줄여줍니다.
더 넓은 색상 표현 (OKLCH 색상 모델) 기본 색상 모델이 기존 RGB에서 최신 디스플레이에 더 적합한 OKLCH로 변경되었습니다. bg-blue-500과 같은 클래스 이름은 그대로지만, 내부적으로 더 뛰어난 색상 표현력을 갖게 된 것입니다.

설정 파일 없이 구현하는 동적 스타일링

이전 버전의 가장 큰 허들 중 하나는 미리 정의되지 않은 값을 사용하기 어렵다는 점이었습니다. v4는 이 문제를 훌륭하게 해결했습니다.

임의 값(Arbitrary Values) 자동 지원 w-71이나 mt-3.5처럼 이전에 사용할 수 없었던 값을 클래스에 그냥 적기만 하면 자동으로 CSS를 생성해 줍니다. 더 이상 w-[420px]와 같이 대괄호 구문을 사용하거나, tailwind.config.js에 일일이 값을 추가할 필요가 없습니다.
데이터 속성 변형(Data Attribute Variants) hover:, focus: 같은 상태뿐만 아니라, data-* 속성을 변형으로 직접 사용할 수 있게 되었습니다.
```
<div data-current class="opacity-75 data-current:opacity-100">...</div>
```
위 코드처럼 data-current 속성이 있을 때만 특정 스타일을 적용할 수 있어, JavaScript와 연동하여 상태를 관리할 때 훨씬 더 직관적인 코드가 가능해졌습니다.

코어에 통합된 고급 기능들

v4에서는 이전 버전에서 별도의 플러그인을 설치해야 했던 고급 기능들이 코어에 통합되었습니다.

컨테이너 쿼리(Container Queries) 플러그인 없이 @container 클래스와 @sm:, @lg: 같은 변형을 통해 부모 컨테이너 크기에 반응하는 컴포넌트를 손쉽게 만들 수 있습니다.
```
<div class="@container">
  <div class="grid grid-cols-1 @sm:grid-cols-3 @lg:grid-cols-4"></div>
</div>
```
3D 변형(3D Transforms) rotate-x-8, translate-z-4 와 같은 3D 변형 유틸리티가 추가되어, 이전에는 어려웠던 입체적인 UI를 CSS만으로 구현할 수 있게 되었습니다.

마무리하며

이번에 새로운 Tailwind CSS 버전을 도입해 본 경험은 단순히 라이브러리를 업그레이드하는 것을 넘어, 저의 개발 워크플로우를 돌아보고 개선하는 좋은 계기가 되었습니다.

향상된 성능은 개발 과정의 효율을 높여주었고,
CSS-first 설정은 분리되었던 생각의 흐름을 하나로 모아주었습니다.

새로운 방식에 적응하는 시간이 물론 필요하겠지만, 그 과정에서 얻게 될 생산성과 개발 경험의 향상은 그 시간 투자를 충분히 보상하고도 남는다고 생각합니다. 만약 Tailwind CSS를 사용하고 계시거나 도입을 고민 중이라면, 새로운 버전은 주저 없이 선택해야 할 강력한 대안이 될 것입니다.

## v4 개발 경험의 개선#

## 설정의 변화: tailwind.config.js의 작별과 CSS-first#

모던 CSS 기능의 완전한 통합#

설정 파일 없이 구현하는 동적 스타일링#

코어에 통합된 고급 기능들#

마무리하며#