6분

Tailwind CSS v4.0

최근에 가장 많이 사용하는 CSS 도구를 저에게 물어본담면 Tailwind CSS라고 말할 수 있습니다.

유틸리티 클래스를 사용하여 CSS를 작성할 수 있어서, CSS를 작성하는데 있어서 많은 시간을 절약할 수 있습니다. 양날의 검이긴 하지만 저에겐 좀 더 나은 개발자 경험을 제공해주는 것 같습니다.

그리고 이제 Tailwind CSS v4.0 알파버전이 공개되었습니다. 추후 올해 말에 정식 릴리즈를 할 예정이라고 합니다. 내용은 훑어보니 많은 부분이 바뀌기도 했고 꽤나 흥미로운 내용들이 많아보입니다.

그 내용들을 블로그를 통해 살펴보면서 앞으로 릴리즈될 Tailwind CSS v4.0에 대해 알아보았습니다.

Tailwind CSS v4.0의 진행 상황

지난 여름 Tailwind Connect에서 개발자 경험을 개선하고 최근 발전된 웹 플랫폼에 맞춰 새롭게 개발 중인 Tailwind CSS용 고성능 엔진인 Oxide의 프리뷰를 공유했습니다.

새로운 엔진은 v3.x 버전으로 출시될 예정이었지만, 새로운 프레임워크처럼 느껴지는 많은 변경 사항이 있어서 v4.0으로 버전을 올리기로 결정했습니다.

아직 초기 단계이고 할 일이 많지만, 오늘 진행 상황을 공유하고 v4.0.0-alpha를 처음으로 공개하여 여러분이 미리 경험하고 올해 말 안정적인 릴리즈에 도달할 수 있도록 돕고자 합니다.

빠른 속도를 위해 개발된 새로운 엔진

새로운 엔진은 Tailwind 팀의 모든 역량을 사용하여 더 잘 모델링하고 훨씬 적은 코드로 더 빠르게 작업할 수 있도록 완전히 새롭게 재작성되었습니다.

최대 10배 빨라진 속도 - 960ms에서 105ms로 Tailwind CSS 웹사이트 빌드 시간을 줄였고, 341ms에서 55ms로 Tailwind Catalyst UI 키트 빌드 시간을 줄였습니다.
더 작은 설치 공간 - 새로운 엔진은 Rust, Lighting CSS로 재작성하여 더 무거운 네이티브 패키지를 사용하더라도 설치 공간이 35% 이상 작아졌습니다.
Rust, 그러나 중요한 부분만 - 확장성을 위해 프레임워크 핵심은 TypeScript로 유지하면서 프레임워크에서 가장 무겁고 병렬화가 가능한 일부분을 Rust로 마이그레이션했습니다.
오직 1개의 종속성 - 새로운 엔진이 의존하는 유일한 종속성은 Lighting CSS 뿐입니다.
커스텀 Parser - 자체 CSS Parser를 작성하고 필요에 맞게 데이터 구조를 설계하여 PostCSS를 사용할 때보다 2배 이상 빠르게 파싱할 수 있습니다.

통합된 툴체인

Tailwind CSS v4는 더 이상 단순한 플러그인이 아니라 CSS 처리를 위한 올인원 툴입니다. 프레임워크에 Lighting CSS를 직접 통합하였으므로 CSS 파이프라인에 대해 아무것도 구성할 필요가 없습니다.

@import기능 내장 - postcss-import와 같은 도구를 설정하고 구성할 필요가 없습니다.
prefix 기능 내장 - 더 이상 autoprefixer를 프로젝트에 추가할 필요가 없습니다.
nesting 기능 내장 - 중첩 CSS를 그대로 써도 별도 플러그인 없이 바로 동작합니다.
Syntax 변환 - oklck() 색상 및 미디어 쿼리 range와 같은 최신 CSS 기능이 더 나은 브라우저 호환성을 위해 자동으로 변환됩니다.

아직 PostCSS 플러그인을 사용하고 있지만 first-party 번들러 플러그인도 검토 중이며, 오늘 공개된 알파 릴리즈와 함께 공식 Vite 플러그인을 공개할 예정이니 지금 바로 사용해 보세요.

결합가능한 Variant

새로운 아키텍쳐는 group-*, peer-*, has-* 그리고 v4에서 새롭게 공개된 not-* variant과 같이 다른 selector와 함께 사용할 수 있습니다.

이전 릴리즈에서는 group-has-*와 같은 variant가 프레임워크에 명시적으로 정의되어 있었지만, v4에서는 group-*는 기존의 has-*와 함께 구성할 수 있으며, 이는 focus와 같은 다른 variant와도 함께 구성할 수 있습니다:

<div class="group">
-  <div class="group-has-[&:focus]:opacity-100">
+  <div class="group-has-focus:opacity-100">
    <!-- ... -->
  </div>
</div>

이러한 결합은 제한이 없습니다. 어떤 이유로 group-not-haas-peer-not-data-active:underline같은 것도 작성할 수 있습니다.

zero-configuration (content 감지)

이번 알파 릴리스에서 content 경로를 구성하지 않는 것을 볼 수 있습니다. 대부분 프로젝트에서는 이 작업을 다시 할 필요가 없습니다. Tailwind가 템플릿 파일을 자동으로 찾아주기 때문입니다.

Tailwind를 프로젝트에 통합하는 방식에 따라 두 가지 방법 중 하나를 사용하여 이 작업을 수행합니다:

PostCSS 플러그인 또는 CLI를 사용하는 경우 Tailwind는 전체 프로젝트를 크롤링하여 템플릿 파일을 찾고, .gitignore 파일에 있는 디렉토리를 크롤링하지 않고 바이너리 파일 형식을 무시하는 등 빠른 작업을 위해 최적화되어 있습니다.
Vite 플러그인을 사용하는 경우 모듈 그래프에 의존합니다. 사용자가 실제로 어떤 파일을 사용하는지 정확히 알 수 있기 때문에 오탐지, 미탐지 없이 성능을 극대화할 수 있습니다. 향후 다른 번들러 플러그인을 통해 이 접근 방식을 Vite 생태계 외부로 확장할 수 있기를 기대합니다.

향후에는 content 경로를 명시적으로 구성하는 방법을 도입할 예정이짐만, 현재는 이 자동 접근 방식이 모든 사용자에게 얼마나 잘 동작하는지 확인하고자 합니다.

CSS-first 설정

Tailwind CSS v4.0의 주요 목표는 프레임워크가 자바스크립트 라이브러리처럼 느껴지지 않고 CSS 네이티브처럼 느껴지도록 만드는 것입니다.

Tailwind CSS를 설치하고 CSS @import을 프로젝트에 추가하면 됩니다:

@import "tailwindcss";

그리고 자바스크립트 파일에서 커스텀 설정하는 대신 CSS 변수를 사용하기만 하면 됩니다:

@import "tailwindcss";
 
@theme {
  --font-family-display: "Satoshi", "sans-serif";
 
  --breakpoint-3xl: 1920px;
 
  --color-neon-pink: oklch(71.7% 0.25 360);
  --color-neon-lime: oklch(91.5% 0.258 129);
  --color-neon-cyan: oklch(91.3% 0.139 195.8);
}

특별한 @theme을 사용하면 Tailwind가 해당 변수를 기반으로 새로운 유틸리티와 variant를 사용할 수 있도록 하여 3xl:text-neon-lime과 같은 클래스를 사용할 수 있습니다:

<div class="max-w-lg 3xl:max-w-xl">
  <h1 class="font-display text-4xl">
    Data to <span class="text-neon-cyan">enrich</span> your online business
  </h1>
</div>

새로운 CSS 변수를 추가하는 것은 이전 버전의 extend와 동일하게 작동하지만, 커스텀 변수를 정의하기 전에 --color-*: initial과 같은 구문으로 네임스페이스를 초기화하면 전체 커스텀 변수를 재정의할 수 있습니다:

@import "tailwindcss";
 
@theme {
  --color-*: initial;
 
  --color-gray-50: #f8fafc;
  --color-gray-100: #f1f5f9;
  --color-gray-200: #e2e8f0;
  /* ... */
  --color-green-800: #3f6212;
  --color-green-900: #365314;
  --color-green-950: #1a2e05;
}

아직 일부 네이밍 룰을 조정하는 중이지만 Github에서 default 테마를 확인하고 커스텀 할 수 있는 항목을 확인할 수 있습니다.

default 테마를 명시적으로 지우지 않고 처음부터 다시 시작하고 싶다면 "tailwindcss/preflight"와 "tailwindcss/utilities"를 직접 가져와서 defaault 테마를 import하지 않고 사용할 수 있습니다.

- @import "tailwindcss";
+ @import "tailwindcss/preflight" layer(base);
+ @import "tailwindcss/utilities" layer(utilities);
 
@theme {
  --color-*: initial;
  --color-gray-50: #f8fafc;
  --color-gray-100: #f1f5f9;
  --color-gray-200: #e2e8f0;
  /* ... */
  --color-green-800: #3f6212;
  --color-green-900: #365314;
  --color-green-950: #1a2e05;
}

또한 모든 테마 값을 커스텀 CSS에서 네이티브 CSS 변수로 사용할 수 있습니다:

:root {
  --color-gray-50: #f8fafc;
  --color-gray-100: #f1f5f9;
  --color-gray-200: #e2e8f0;
  /* ... */
  --color-green-800: #3f6212;
  --color-green-900: #365314;
  --color-green-950: #1a2e05;
}

theme() 함수를 사용하지 않고 임의의 값으로 템마 값을 쉽게 사용할 수 있습니다:

<div class="p-[calc(var(--spacing-6)-1px)]">
  <!-- ... -->
</div>

또한 Framer Motion과 같은 UI 라이브러리에서 작업할 때 resolveConfig() 함수를 사용하지 않고도 테마 값을 사용할 수 있습니다:

import { motion } from "framer-motion"
 
export const MyComponent = () => (
  <motion.div
    initial={{ y: "var(--spacing-8)" }}
    animate={{ y: 0 }}
    exit={{ y: "var(--spacing-8)" }}
  >
    {children}
  </motion.div>
)

변경된 사항들

현재 v4에서 변경된 사항 중 중요한 몇 가지를 살펴보겠습니다:

더 이상 사용되지 않는 유틸리티 제거 - text-{color}/*, grow-*, box-decoration-slice와 같이 오래 전에 문서화를 중단한 유틸리티를 제거하고 최신 유틸리티인 text-opacity-*, flex-grow-*, decoration-slice로 대체되었습니다.
PostCSS 플러그인과 CLI는 별도 패키지입니다 - 모든 사용자에게 필요한 것이 아니므로 기본 tailwind 패키지에는 더 이상 포함되지 않으며 @tailwindcss/postcss 및 @tailwindcss/cli를 사용하여 별도로 설치해야 합니다.
기본 border color 없음 - border 유틸리티 기본값이 gray-200이었짐만 이제는 브라우저와 마찬가지로 currentColor로 변경되었습니다. zinc나 slate 등을 기본 gray 색상으로 사용하는 경우 실수로 잘못된 gray 색상을 프로젝트에 추가하는 것을 방지하기 위해 변경되었습니다.
Ring 기본값이 1입니다 - ring 유틸리티는 기본적으로 3px의 blue 색상이었지만 이제는 currentColor를 사용하는 1px ring입니다. 현재 프로젝트에서 border 대신 ring-* 유틸리티를 사용하고 focus 시 outline-*를 사용하므로 일관성을 유지하는 것이 도움되는 변화라고 생각합니다.

프로젝트에서 나타날 수 있는 사소한 변경 사항이 몇 가지 더 있지만 위 변경 사항처럼 의도적인 것은 없습니다. 만약 예상치 못한 사항이 발견되면 이슈를 제출하여 문제를 해결할 수 있도록 도와주시기 바랍니다.

v4.0 로드맵

새로운 엔진은 완전히 새롭게 작성되었으며, 지금까지는 새로운 방식을 사용하여 새롭게 재구성된 개발자 경험에 집중해 왔습니다.

이전 버전과 호환성에 높은 가치를 두었음며, 올해 말 안정적인 v4.0 릴리스 태그를 붙이기 전까지 대부분 작업이 여기에 집중되어 있습니다.

자바스크립트 설정 파일 지원 - v4로 쉽게 마이그레이션 할 수 있도록 기존 tailwind.config.js 파일과 호환성을 재도입
명시적인 content 경로 설정 - 자동 content 감지가 설정이 충분하지 않을 경우 템플릿 위치를 명시적으로 알려줄 수 있게
다른 다크 모드 지원: 현재는 미디어 쿼리를 사용하는 다크 모듬만 지원하며, selector, variant 전략을 재구현
플러그인 및 커스텀 유틸리티: 아직 플러그인이나 variant에 자동으로 동작하는 커스텀 유틸리티를 작성하는 기능은 지원하지 않습니다. stable 버전이 출시되기 전에 이 기능을 추가할 예정
Prefix 지원: 아직 클래스의 Prefix를 구성할 수 있는 방법은 없지만, 곧 재추가할 예정
Safelist와 Blocklist: 아직은 Tailwind가 특정 클래스를 생성하도록 강제하거나 다른 클래스를 생성하지 못하도록 할 수 없지만 이 기능을 추가할 예정
!important 설정 지원: 현재는 모든 유틸리티를 !important로 설정할 수 없지만 이 기능을 추가할 예정
theme() 함수 지원: 지금은 var()를 사용할 수 있으므로 필요없지만 이전 버전과의 호환성을 위해 이 기능을 추가할 예정
Standalone CLI: 아직 새로운 엔진을 위한 Standalone CLI를 개발하지 못했지만 v4.0 릴리스 이전에 반드시 제공할 예정

이 이외에도 수정해야 할 버그가 많고, 새로운 CSS 기능이 추가될 예정이며, 정식 출시 전에 좀 더 다듬어야 할 새로운 API를 개선할 예정입니다.

구체적인 출시 일정은 아직은 없지만 여름 휴가 시즌이 시작되기 전에 v4.0을 stable 버전으로 표시하고 싶다는 목표를 가지고 있다고 합니다.

알파 버전 체험하기

이미 몇 가지 알파 릴리즈 태그를 공개했으며, 이를 사용하여 새로운 엔진을 체험할 수 있습니다.

VSCode 용 Tailwind CSS IntelliSense 확장 프로그램을 사용중인 경우 사전 릴리스 버전으로 전환하고, Prettier 플러그인을 사용하는 경우 최신 버전으로 설치하세요.

문제가 발견된다면 Github 이슈에 제보해주시기 바랍니다.

Vite 사용 시

Tailwind CSS v4 alpha와 새로운 Vite 플러그인을 설치하세요:

npm install tailwindcss@next @tailwindcss/vite@next

vite.config.ts 파일에 설치한 플러그인을 추가하세요:

import tailwindcss from "@tailwindcss/vite"
import { defineConfig } from "vite"
 
export default defineConfig({
  plugins: [tailwindcss()],
})

마지막으로 메인 CSS 파일에 Tailwind를 import하세요:

@import "tailwindcss";

PostCSS 사용 시

Tailwind CSS v4 alpha와 별도 PostCSS 플러그인 패키지를 설치하세요:

npm install tailwindcss@next @tailwindcss/postcss@next

그 다음 postcss.config.js 파일에 설치한 플러그인을 추가하세요:

module.exports = {
  plugins: {
    "@tailwindcss/postcss": {},
  },
}

마지막으로 메인 CSS 파일에 Tailwind를 import하세요:

@import "tailwindcss";

CLI 사용 시

Tailwind CSS v4 alpha와 별도 CLI 패키지를 설치하세요:

npm install tailwindcss@next @tailwindcss/cli@next

메인 CSS 파일에 Tailwind를 import하세요:

@import "tailwindcss";

마지막으로 CSS 파일을 CLI 툴을 이용해 컴파일 하세요:

npx @tailwindcss/cli@next -i app.css -o dist/app.css

마무리하며

Tailwind CSS는 개발자 경험을 중심으로 디자인된 혁신적인 CSS 프레임워크로, 유틸리티 중심의 접근 방식을 통해 빠르고 유연한 웹 디자인을 가능하게 합니다. 글 머리에서도 썼지만 제가 최근 가장 많이 사용하는 CSS 도구입니다.

이번에 소개된 Tailwind CSS v4.0 알파 버전은 이러한 철학을 더욱 발전시키는 많은 새로운 기능과 개선 사항을 제공합니다. v4.0은 새로운 고성능 엔진 Oxide를 기반으로 하여 속도와 성능을 대폭 향상시키고, CSS-first 설정, 커스텀 Parser, 통합된 툴체인 등을 통해 훨씬 더 나은 개발자 경험을 제공할 것으로 예상됩니다. (RIIR이 모든 것을 해결할 수는 없지만, 이러한 영역에서는 엄청난 효과를 나타내는 것 같습니다.)

v4.0의 로드맵과 알파 버전 사용에 대한 둘러보면서 개발자들에게 어떤 변화를 가져올지, 그리고 어떻게 현재의 프로젝트에 적용할 수 있을지를 기대반 걱정반 생각을 가지게 됩니다. 다만 이러한 발전은 프론트엔드 개발에 중요한 부분이 될 것이며, Tailwind CSS v4.0은 이러한 영역에서 더 높은 위치를 차지할 것으로 기대됩니다.

알파 버전을 미리 사용해봐야겠다는 생각이 들어서 이 블로그에는 조만간 작업을 하지 않을까 싶습니다.

reference

https://tailwindcss.com/blog/tailwindcss-v4-alpha

마지막 업데이트

3/18/2024

JHSeo

배우는 것을 좋아하고 관심이 많은 웹 엔지니어 입니다. 느리더라도 꾸준하게 성장하려고 노력하는 개발자입니다.

Github Twitter

The Two Reacts

React를 좋아하는 이유(by Kent C.Dodds)