Tailwind CSS v4.0

드디어 완성했습니다. Tailwind CSS v4.0를 출시했습니다.

Tailwind CSS v4.0는 성능과 유연성을 최적화한 새로운 버전의 프레임워크로, 재설계된 설정과 커스터마이징 경험을 제공하며 웹 플랫폼의 최신 기술을 최대한 활용합니다.

• 새로운 고성능 엔진 — 전체 빌드 속도가 최대 5배, 증분 빌드 속도가 100배 이상 빨라졌으며, 마이크로초 단위로 측정됩니다.
• 모던 웹을 위해 설계 — 캐스케이드 레이어, @property를 사용한 등록된 커스텀 속성, color-mix()와 같은 최신 CSS 기능을 기반으로 구축되었습니다.
• 간소화된 설치 — 의존성이 줄어들고, 설정이 필요 없으며, CSS 파일에 단 한 줄의 코드만 추가하면 됩니다.
• 퍼스트파티 Vite 플러그인 — 최대 성능과 최소 설정을 위한 완벽한 통합.
• 자동 콘텐츠 감지 — 모든 템플릿 파일이 자동으로 감지되며, 설정이 필요 없습니다.
• 내장된 import 지원 — 여러 CSS 파일을 번들링하기 위해 추가 도구가 필요하지 않습니다.
• CSS 우선 설정 — JavaScript 설정 파일 대신 CSS에서 직접 프레임워크를 커스터마이징하고 확장할 수 있는 재설계된 개발자 경험.
• CSS 테마 변수 — 모든 디자인 토큰이 네이티브 CSS 변수로 노출되어 어디서든 접근할 수 있습니다.
• 동적 유틸리티 값 및 변형 — 간격 스케일의 값을 추측하거나 기본 데이터 속성과 같은 것들을 위해 설정을 확장할 필요가 없습니다.
• 모던 P3 색상 팔레트 — 현대 디스플레이 기술을 최대한 활용한 더 선명한 색상 팔레트로 재설계되었습니다.
• 컨테이너 쿼리 — 컨테이너 크기에 따라 엘리먼트를 스타일링하기 위한 퍼스트클래스 API, 플러그인이 필요 없습니다.
• 새로운 3D 변형 유틸리티 — HTML에서 직접 3D 공간에서 엘리먼트를 변형할 수 있습니다.
• 확장된 그라데이션 API — 방사형 및 원뿔형 그라데이션, 보간 모드 등.
• @starting-style 지원 — JavaScript 없이도 진입 및 퇴장 트랜지션을 생성할 수 있는 새로운 변형.
• not-* 변형 — 다른 변형, 커스텀 선택자, 미디어 또는 기능 쿼리와 일치하지 않을 때만 엘리먼트를 스타일링합니다.
• 더 많은 새로운 유틸리티 및 변형 — color-scheme, field-sizing, 복잡한 그림자, inert 등을 포함합니다.

오늘 바로 새 프로젝트에 설치하거나 Tailwind Play에서 브라우저에서 직접 사용해 보세요.

기존 프로젝트의 경우, 포괄적인 업그레이드 가이드와 자동 업그레이드 도구를 제공하여 최신 버전으로 빠르고 쉽게 업그레이드할 수 있습니다.

새로운 고성능 엔진

Tailwind CSS v4.0은 프레임워크를 처음부터 다시 작성한 버전입니다. 지난 몇 년간 아키텍처에 대해 배운 모든 것을 적용하여 가능한 한 빠르게 최적화했습니다.

우리 프로젝트에서 벤치마크를 진행한 결과, 전체 빌드 속도는 3.5배 이상 빨라졌고, 증분 빌드 속도는 8배 이상 빨라졌습니다.

아래는 Tailwind CSS v4.0을 Catalyst와 비교하여 측정한 중간값 빌드 시간입니다:

가장 인상적인 개선 사항은 새로운 CSS를 컴파일할 필요가 없는 증분 빌드에서 나타났습니다. 이러한 빌드는 100배 이상 빨라졌으며, 마이크로초 단위로 완료됩니다. 프로젝트를 오래 작업할수록, flex, col-span-2, font-bold와 같이 이전에 사용한 클래스를 다시 사용하는 경우가 많아지기 때문에 이러한 빌드를 더 자주 실행하게 됩니다.

모던 웹을 위해 설계됨

Tailwind CSS v3.0을 출시한 이후 플랫폼은 크게 진화했으며, v4.0은 이러한 개선 사항을 최대한 활용합니다.

@layer theme, base, components, utilities;@layer utilities {  .mx-6 {    margin-inline: calc(var(--spacing) * 6);  }  .bg-blue-500\/50 {    background-color: color-mix(in oklab, var(--color-blue-500) 50%, transparent);  }}@property --tw-gradient-from {  syntax: "<color>";  inherits: false;  initial-value: #0000;}

우리는 다음과 같은 모던 CSS 기능을 활용하고 있습니다:

• 네이티브 캐스케이드 레이어 — 다양한 스타일 규칙이 서로 어떻게 상호작용하는지 더욱 세밀하게 제어할 수 있습니다.
• 등록된 커스텀 속성 — 그라데이션 애니메이션과 같은 작업을 가능하게 하며, 대규모 페이지에서 성능을 크게 향상시킵니다.
• color-mix() — CSS 변수와 currentColor를 포함한 모든 색상 값의 투명도를 조정할 수 있습니다.
• 논리적 속성 — RTL 지원을 단순화하고 생성된 CSS의 크기를 줄입니다.

이러한 기능들은 Tailwind 내부를 더욱 단순화하여 버그 발생 가능성을 줄이고 프레임워크 유지보수를 더 쉽게 만들어줍니다.

간편한 설치

v4.0에서는 설정 과정을 크게 간소화했습니다. 단계 수를 줄이고 많은 보일러플레이트 코드를 제거했습니다.

npm i tailwindcss @tailwindcss/postcss;

export default {  plugins: ["@tailwindcss/postcss"],};

@import "tailwindcss";

v4.0에서 이 과정을 개선하면서 Tailwind는 그 어느 때보다 가벼워졌습니다:

• 단 한 줄의 CSS — 더 이상 @tailwind 지시어가 필요하지 않습니다. @import "tailwindcss"만 추가하면 바로 빌드를 시작할 수 있습니다.
• 설정 불필요 — 템플릿 파일 경로조차 설정하지 않고도 프레임워크를 바로 사용할 수 있습니다.
• 외부 플러그인 불필요 — @import 규칙을 기본으로 제공하며, 벤더 프리픽싱과 모던 구문 변환을 위해 Lightning CSS를 사용합니다.

물론 이 과정은 프로젝트당 한 번만 거치지만, 매주 새로운 사이드 프로젝트를 시작하고 중단할 때마다 시간이 누적됩니다.

Vite 공식 플러그인

Vite 사용자라면 이제 PostCSS 대신 @tailwindcss/vite를 사용해 Tailwind를 통합할 수 있습니다:

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

Tailwind CSS v4.0은 PostCSS 플러그인으로 사용할 때 매우 빠르지만, Vite 플러그인을 사용하면 더 나은 성능을 얻을 수 있습니다.

자동 콘텐츠 감지

Tailwind CSS v3에서 항상 귀찮게 설정해야 했던 content 배열을 기억하시나요? v4.0에서는 이 모든 것을 자동으로 감지하는 여러 휴리스틱을 도입해 더 이상 설정할 필요가 없게 되었습니다.

예를 들어, 버전 관리되지 않은 의존성이나 생성된 파일을 스캔하지 않도록 .gitignore 파일에 있는 모든 것을 자동으로 무시합니다:

/node_modules/coverage/.next//build

이진 파일 확장자(이미지, 비디오, .zip 파일 등)도 자동으로 무시됩니다.

기본적으로 제외된 소스를 명시적으로 추가해야 한다면, CSS 파일 안에서 @source 지시자를 사용할 수 있습니다:

@import "tailwindcss";@source "../node_modules/@my-company/ui-lib";

@source 지시자는 내부적으로 동일한 휴리스틱을 사용하므로, 모든 확장자를 명시적으로 스캔할 필요 없이 이진 파일 타입도 자동으로 제외됩니다.

소스 파일에서 클래스 탐지에 대한 새로운 문서에서 더 자세히 알아보세요.

내장된 import 지원

v4.0 이전에는 @import를 사용해 다른 CSS 파일을 인라인으로 불러오려면 postcss-import와 같은 플러그인을 추가로 설정해야 했습니다.

이제는 별도의 도구 없이도 기본적으로 이 기능을 지원합니다:

export default {  plugins: [    "postcss-import",    "@tailwindcss/postcss",  ],};

우리의 import 시스템은 Tailwind CSS를 위해 특별히 제작되었기 때문에, 엔진과 긴밀하게 통합해 더 빠른 성능을 제공할 수 있습니다.

CSS 우선 설정

Tailwind CSS v4.0의 가장 큰 변화 중 하나는 프로젝트 설정을 JavaScript에서 CSS로 전환한 점입니다.

기존의 tailwind.config.js 파일 대신, Tailwind를 임포트하는 CSS 파일에서 직접 모든 커스텀 설정을 구성할 수 있습니다. 이렇게 하면 프로젝트에서 신경 써야 할 파일이 하나 줄어듭니다:

@import "tailwindcss";@theme {  --font-display: "Satoshi", "sans-serif";  --breakpoint-3xl: 1920px;  --color-avocado-100: oklch(0.99 0 0);  --color-avocado-200: oklch(0.98 0.04 113.22);  --color-avocado-300: oklch(0.94 0.11 115.03);  --color-avocado-400: oklch(0.92 0.19 114.08);  --color-avocado-500: oklch(0.84 0.18 117.33);  --color-avocado-600: oklch(0.53 0.12 118.34);  --ease-fluid: cubic-bezier(0.3, 0, 0, 1);  --ease-snappy: cubic-bezier(0.2, 0, 0, 1);  /* ... */}

새로운 CSS 우선 설정을 사용하면 tailwind.config.js 파일에서 할 수 있었던 거의 모든 작업을 수행할 수 있습니다. 여기에는 디자인 토큰 설정, 커스텀 유틸리티 및 변형 정의 등이 포함됩니다.

이 기능이 어떻게 작동하는지 더 자세히 알아보려면 새로운 테마 변수 문서를 참고하세요.

CSS 테마 변수

Tailwind CSS v4.0은 모든 디자인 토큰을 기본적으로 CSS 변수로 제공합니다. 이를 통해 런타임에 필요한 값을 CSS만으로 참조할 수 있습니다.

앞서 살펴본 @theme 예제를 사용하면, 모든 값이 일반적인 커스텀 속성으로 CSS에 추가됩니다:

:root {  --font-display: "Satoshi", "sans-serif";  --breakpoint-3xl: 1920px;  --color-avocado-100: oklch(0.99 0 0);  --color-avocado-200: oklch(0.98 0.04 113.22);  --color-avocado-300: oklch(0.94 0.11 115.03);  --color-avocado-400: oklch(0.92 0.19 114.08);  --color-avocado-500: oklch(0.84 0.18 117.33);  --color-avocado-600: oklch(0.53 0.12 118.34);  --ease-fluid: cubic-bezier(0.3, 0, 0, 1);  --ease-snappy: cubic-bezier(0.2, 0, 0, 1);  /* ... */}

이를 통해 인라인 스타일로 값을 재사용하거나 Motion과 같은 라이브러리에 전달하여 애니메이션을 적용하기가 쉬워집니다.

동적 유틸리티 값과 변형

Tailwind CSS v4.0에서는 많은 유틸리티와 변형의 작동 방식을 단순화했습니다. 이제 특정 타입의 임의 값을 별도의 설정 없이도 사용할 수 있으며, 임의 값 구문을 사용할 필요가 없어졌습니다.

예를 들어, Tailwind CSS v4.0에서는 바로 사용할 수 있는 그리드를 원하는 크기로 만들 수 있습니다:

<div class="grid grid-cols-15">  <!-- ... --></div>

또한, 커스텀 불리언 데이터 속성을 정의하지 않고도 타겟팅할 수 있습니다:

<div data-current class="opacity-75 data-current:opacity-100">  <!-- ... --></div>

px-*, mt-*, w-*, h-*와 같은 간격 유틸리티도 이제 단일 간격 스케일 변수에서 동적으로 파생되며, 별도의 설정 없이도 모든 값을 바로 사용할 수 있습니다:

@layer theme {  :root {    --spacing: 0.25rem;  }}@layer utilities {  .mt-8 {    margin-top: calc(var(--spacing) * 8);  }  .w-17 {    width: calc(var(--spacing) * 17);  }  .pr-29 {    padding-right: calc(var(--spacing) * 29);  }}

v4.0과 함께 출시된 업그레이드 도구는 더 이상 필요하지 않은 임의 값을 사용하는 경우, 이러한 유틸리티를 자동으로 단순화해 줍니다.

모던 P3 색상 팔레트

기본 색상 팔레트 전체를 rgb에서 oklch로 업그레이드했습니다. 더 넓은 색 영역을 활용하여, 이전에 sRGB 색 공간에 제한되었던 부분에서 색상을 더 선명하게 만들었습니다.

v3에서의 색상 간 균형을 유지하려고 노력했기 때문에, 전반적으로 새로워졌더라도 기존 프로젝트를 업그레이드할 때 큰 변화를 느끼지 않을 것입니다.

컨테이너 쿼리

v4.0부터 코어에 컨테이너 쿼리 지원이 추가되었습니다. 이제 @tailwindcss/container-queries 플러그인이 필요하지 않습니다:

<div class="@container">  <div class="grid grid-cols-1 @sm:grid-cols-3 @lg:grid-cols-4">    <!-- ... -->  </div></div>

또한 새로운 @max-* 변형을 사용하여 최대 너비 컨테이너 쿼리를 지원합니다:

<div class="@container">  <div class="grid grid-cols-3 @max-md:grid-cols-1">    <!-- ... -->  </div></div>

일반적인 브레이크포인트 변형과 마찬가지로, @min-*와 @max-* 변형을 함께 사용하여 컨테이너 쿼리 범위를 정의할 수도 있습니다:

<div class="@container">  <div class="flex @min-md:@max-xl:hidden">    <!-- ... -->  </div></div>

새로 추가된 컨테이너 쿼리 문서에서 더 자세히 알아보세요.

새로운 3D 변형 유틸리티

드디어 rotate-x-*, rotate-y-*, scale-z-*, translate-z-* 등 다양한 3D 변형을 위한 API를 추가했습니다.

Mar 16, 2020

Michael Foster

Boost your conversion rate

<div class="perspective-distant">  <article class="rotate-x-51 rotate-z-43 transform-3d ...">    <!-- ... -->  </article></div>

시작하려면 업데이트된 transform-style, rotate, perspective, perspective-origin 문서를 확인하세요.

확장된 그라데이션 API

v4.0에서는 다양한 새로운 그라데이션 기능을 추가했습니다. 이제 커스텀 CSS를 작성하지 않고도 더 화려한 효과를 구현할 수 있습니다.

선형 그라데이션 각도

이제 선형 그라데이션에서 각도를 값으로 사용할 수 있습니다. 예를 들어 bg-linear-45와 같은 유틸리티를 사용해 45도 각도의 그라데이션을 만들 수 있습니다:

<div class="bg-linear-45 from-indigo-500 via-purple-500 to-pink-500"></div>

bg-gradient-*를 bg-linear-*로 이름을 바꾼 것을 눈치챘을 겁니다. 곧 그 이유를 알게 될 것입니다!

그라데이션 보간 방식 수정자

그라데이션의 색상 보간 방식을 제어할 수 있는 수정자를 추가했습니다. 예를 들어, bg-linear-to-r/srgb 클래스는 sRGB를 사용하여 보간하고, bg-linear-to-r/oklch 클래스는 OKLCH를 사용하여 보간합니다:

<div class="bg-linear-to-r/srgb from-indigo-500 to-teal-400">...</div><div class="bg-linear-to-r/oklch from-indigo-500 to-teal-400">...</div>

OKLCH나 HSL과 같은 극좌표 색 공간을 사용하면 from-*와 to-* 색상이 색상환에서 멀리 떨어져 있을 때 훨씬 더 선명한 그라데이션을 얻을 수 있습니다. v4.0에서는 기본적으로 OKLAB을 사용하지만, 이러한 수정자를 추가하여 다른 색 공간을 사용해 보간할 수도 있습니다.

원뿔형 및 방사형 그라데이션

원뿔형 및 방사형 그라데이션을 생성하기 위해 새로운 bg-conic-*와 bg-radial-* 유틸리티를 추가했습니다:

<div class="size-24 rounded-full bg-conic/[in_hsl_longer_hue] from-red-600 to-red-600"></div><div class="size-24 rounded-full bg-radial-[at_25%_25%] from-white to-zinc-900 to-75%"></div>

이 새로운 유틸리티는 기존의 from-*, via-*, to-* 유틸리티와 함께 작동하여 선형 그라데이션을 생성하는 것과 같은 방식으로 원뿔형 및 방사형 그라데이션을 생성할 수 있게 해줍니다. 또한 색상 보간 방법을 설정하는 수정자와 그라데이션 위치와 같은 세부 사항을 제어하기 위한 임의 값 지원을 포함합니다.

@starting-style 지원

새로운 starting 변형은 CSS의 @starting-style 기능을 지원하여, 엘리먼트가 처음 표시될 때 속성을 트랜지션할 수 있게 해줍니다:

<div>  <button popovertarget="my-popover">업데이트 확인</button>  <div popover id="my-popover" class="transition-discrete starting:open:opacity-0 ...">    <!-- ... -->  </div></div>

@starting-style을 사용하면, 페이지에 엘리먼트가 나타날 때 JavaScript 없이도 애니메이션을 적용할 수 있습니다. 브라우저 지원은 아직 대부분의 팀에 충분하지 않을 수 있지만, 점점 가까워지고 있습니다!

not-* 변형

새로운 not-* 변형을 추가하여 CSS :not() 의사 클래스를 지원합니다:

<div class="not-hover:opacity-75">  <!-- ... --></div>

.not-hover\:opacity-75:not(*:hover) {  opacity: 75%;}@media not (hover: hover) {  .not-hover\:opacity-75 {    opacity: 75%;  }}

이 기능은 미디어 쿼리와 @supports 쿼리를 부정하는 데에도 사용할 수 있습니다:

<div class="not-supports-hanging-punctuation:px-4">  <!-- ... --></div>

.not-supports-hanging-punctuation\:px-4 {  @supports not (hanging-punctuation: var(--tw)) {    padding-inline: calc(var(--spacing) * 4);  }}

새로운 not-* 문서를 확인하여 더 자세히 알아보세요.

더 많은 새로운 유틸리티와 변형 기능

v4.0에는 다음과 같은 다양한 새로운 유틸리티와 변형 기능이 추가되었습니다:

• 새로운 inset-shadow-* 및 inset-ring-* 유틸리티 — 단일 엘리먼트에 최대 4개의 박스 그림자 레이어를 쌓을 수 있습니다.
• 새로운 field-sizing 유틸리티 — 자바스크립트 코드 한 줄 없이도 텍스트 영역(textarea)의 크기를 자동으로 조정할 수 있습니다.
• 새로운 color-scheme 유틸리티 — 다크 모드에서 보기 흉한 밝은 스크롤바를 드디어 제거할 수 있습니다.
• 새로운 font-stretch 유틸리티 — 다양한 너비를 지원하는 가변 폰트를 세밀하게 조정할 수 있습니다.
• 새로운 inert 변형 — inert 속성이 적용된 비활성 엘리먼트를 스타일링할 수 있습니다.
• 새로운 nth-* 변형 — 나중에 후회할 만한 정말 영리한 작업을 할 수 있습니다.
• 새로운 in-* 변형 — group-*과 비슷하지만 group 클래스가 필요하지 않습니다.
• :popover-open 지원 — 기존 open 변형을 사용하여 열린 팝오버도 타겟팅할 수 있습니다.
• 새로운 하위 엘리먼트 변형 — 모든 하위 엘리먼트를 스타일링할 수 있습니다. (좋든 나쁘든)

이 모든 기능에 대해 더 자세히 알아보려면 관련 문서를 확인하세요.

이것이 바로 Tailwind CSS v4.0입니다. 이 시점까지 오는 데 몇 년의 노력이 필요했지만, 우리는 이번 릴리스를 매우 자랑스럽게 생각하며 여러분이 이를 통해 무엇을 만들어낼지 기대가 큽니다.

직접 사용해보고, 실험해보고, 어쩌면 고장도 내보세요. 그리고 여러분의 의견을 꼭 알려주세요.

단, 내일까지는 버그 리포트는 삼가주세요. 우리 팀이 축하 저녁 식사를 즐기고 호텔의 온수 욕조에서 잠시 쉬며 완벽한 소프트웨어를 출시했다고 믿을 수 있게 해주세요.