tailwind v4
시작하기
변경점
간소화된 설치
업그레이드 필요성
기존 프로젝트 업그레이드 방법
디자인 시스템을 준비하는 도중에 갑자기 tailwind v4의 stable이 업데이트 되었다.
tailwind
이제는 tailwindcss 없으면 살 수 없는 몸이 되었기 때문에 tailwind의 변경점을 알아보고 당장 적용을 할 것인지에 대한 판단을 해보고자 한다.
변경점
새로운 고성능 엔진
v4는 빌드 성능이 크게 향상 되었다. 전체 빌드는 3.5배 이상 빨라지고, 증분 빌드(수정된 부분만 빌드)는 8배 이상 빨라진 것으로 측정되어 있다.
| v3.4 | v4.0 | 개선 | |
|---|---|---|---|
| 전체 빌드 | 378ms | 100밀리초 | 3.78배 |
| 새로운 CSS로 증분적 재구축 | 44ms | 5ms | 8.8배 |
| 새로운 CSS 없이 증분적 재구척 | 35ms | 192마이크로초 | 182배 |
legacy 지원 종료
tailwind는 이제 IE11을 지원하지 않습니다.
legacy를 지원 중단 하면서 새로운 CSS 기능을 지원하며, 기존에 복잡하게 구현되던 CSS 기능을 간편하게 구현가능 해졌습니다.
새로운 CSS 기능 지원
Native Cascade Layers
CSS의 캐스케이드 레이어 @layer : 스타일 규칙 간의 우선순위를 세부적으로 제어할 수 있도록합니다.
Registered Custom Properties
CSS의 커스텀 프로퍼티 @property : 동적 스타일링 성능을 개선
color-mix()
CSS 색상 혼합 함수로 두가지 색상을 특정 비율로 혼합할 수 있다.
Logical Properties
CSS의 논리적 속성을 사용하여 양방향 레이아웃을 간소화
간소화된 설치
설치법 공식 참고!
vite, postcss 의 설치 명령어나 나뉘었다.
자동 콘텐츠 감지
이전에는 tailwind.config.js 에서 tailwind를 사용할 콘텐츠의 경로를 명시해 주었지만 이젠 자동으로 콘텐츠를 감지해준다.
더불어 tailwind.config.js 파일 자체가 사라졌다.
따라서 @theme 도 @import "tailwindcss"; 를 하는 css 파일에서 진행한다.
tailwind.config.js 삭제
이전에 경로와 커스텀 테마, 규칙등을 설정하던 tailwind.config.js 파일은 없어졌습니다.
업그레이드 필요성
설치 방법 간소화, 빌드 속도 개선 등의 장점은 알겠지만, 코드를 치는 입장에서 업그레이드 할 이유는 뭐가 있을까?
P3 컬러 파레트
이제 tailwind도 p3 색역을 지원하기 때문에 더욱 다채로운 색상을 사용할 수 있게 되었다.
Oklch()는 CSS color Module 4에서 등장한 새로운 컬러 선언 방법이다.
oklch(밝기 채도 색상각)으로 색을 표현한다.
Lightness : 밝기를 퍼센트로 나타내며 100%에 가까울 수록 밝음
Chroma : 채도를 나타내며 0에 가까울수록 무채색
Hue : 색조를 0~360도로 나타내며, 색의 종류(빨주노초...)를 결정합니다.
아래와 같이 hex로도 당연히 사용가능하다.
@import "tailwindcss";
@theme {
--color-midnight: #121063;
--color-tahiti: #3ab7bf;
--color-bermuda: #78dcca;
--color-gray-50: oklch(0.984 0.003 247.858);
--color-gray-100: oklch(0.968 0.007 247.896);
}컨테이너 쿼리
Tailwind v4.0
💡목차
💫 변경점 및 변경 예시
Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.
새로운 고성능 엔진
v4.0은 프레임워크를 근본적으로 다시 작성했다. 전체 빌드는 3.5배 이상 빨라지고, 증분 빌드는 8배 이상 빨라진 것으로 측정됐다.
| v3.4 | v4.0 | 개선 | |
|---|---|---|---|
| 전체 빌드 | 378ms | 100밀리초 | 3.78배 |
| 새로운 CSS로 증분적 재구축 | 44ms | 5ms | 8.8배 |
| 새로운 CSS 없이 증분적 재구척 | 35ms | 192마이크로초 | 182배 |
현대 웹을 위한 디자인
- Native Cascade Layers: 서로 다른 스타일 규칙이 상호 작용하는 방식을 그 어느 때보다 더 많이 제어할 수 있게 됐다.
- Registered Custom Properties: Gradient Animation을 적용하고 대용량 페이지에서 성능을 크게 향상시킬 수 있다.
- color-mix(): CSS변수와 .을 포함하여 모든 색상 값의 불투명도를 조정할 수 있다.
- Logical Properties: RTL 지원을 단순화하고 생성된 CSS 크기를 줄인다.
이를 통해 Tailwind 내부를 단순화 하여 버그가 발생할 수 있는 영역을 줄이고 프레임워크의 유지보수가 간편화됐다.
간소화된 설치 과정
기존의 설치 과정에 비해 설치 단계가 매우 간소화됐다.
-
Tailwind CSS 설치
pnpm install tailwindcss @tailwindcss/postcss; -
PostCSS 플러그인 추가
// postcss.config.js export default{ plugins: ["@tailwindcss/postcss"], }; -
CSS에 Tailwind 가져오기
/* index.css */ @import "tailwindcss";
Vite 플러그인
@tailwindcss/vite PostCSS 대신 다음을 사용하여 Tailwind를 통합할 수 있다.
import { defineConfig } from "vite";
*import tailwindcss from "@tailwindcss/vite";*
export default defineConfig({
plugins: [
*tailwindcss(),*
],
});vite 를 사용할 때 vite 플러그인을 사용하면 PostCSS 플러그인보다 더 빠른 성능을 얻을 수 있다.
자동 콘텐츠 감지
기존에는 tailwind를 적용할 파일을 지정했어야 하는데 v4.0에서는 heuristics 모든 것을 자동으로 감지하도록 한다.
제외 파일
- .gitignore에 포함된 파일과 디렉토리
- 이미지, 동영상, .zip 파일과 같은 바이너리 파일 확장자
해당 룰에 의해 자동 제외된 파일을 명시적으로 추가하려면 @source CSS 파일에서 지시문을 추가한다.
/* index.css */
@source "../node_modules/@my-company/ui-lib";내장 import 지원
기존에는 @import를 사용하려면 postcss-import와 같은 외부 플러그인을 설치해야 했다.
// postcss.config.js
export default {
plugins: [
"postcss-import",
"@tailwindcss/postcss",
],
};postcss-import 없이도 @import 디렉티브로 다른 CSS파일을 포함할 수 있다. tailwind CSS 엔진에 직접 통합되어 성능이 더욱 최적화됐다.
/* index.css */
@import "./components/button.css";
@import "./components/card.css";CSS 우선 구성
v4.0으로 업데이트 되면서 프로젝트를 JavaScript로 구성하는 것에서 CSS로 구성하는 것으로 전환됐다.
기존에는 tailwind.config.js에서 커스텀 및 기본설정을 했다면 이를 모두 CSS에서 직접 설정할 수 있게 됐다는 것이다.
// 기존
module.exports = {
theme: {
colors: { ... },
screens: { ... },
},
};/* 변경점 */
@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);
/* ... */
}동적 유틸리티 값 및 변형
유틸리티 클래스와 변형(variants)의 작동 방식을 단순화하여 어떠한 구성이나 임의 값 구문까지 하지 않고도 특정 유형의 임의 값을 허용할 수 있게 됐다.
기존에는 60px은 mt-15와 같은 값은 선언이 돼있지 않기 때문에 mt-[3.75rem]으로 직접 선언해서 사용했었어야 하는데, 따로 설정을 하지 않도라도 mt-15와 같은 값을 Tailwind가 동적으로 처리한다.
사용자 정의 부울 데이터 속성을 정의하지 않고도 타겟으로 지정할 수 있다.
<div data-current class="opacity-75 data-current:opacity-100">
<!-- ... -->
</div>px-*, mt-*, w-*, h-* 등과 같은 spacing 유틸리티는 이제 기본 스케일 변수에서 동적으로 값을 계산한다. 임의 값도 제한 없이 사용할 수 있어, 커스터마이징이 더 가능해졌다.
@layer theme {
:root {
--spacing: 0.25rem; //spacing 값을 재정의하여 프로젝트 값 재정비
}
}
@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);
}
}현대화된 P3 컬러 팔레트
최신 OLED 디스플레이는 기존의 디스플레이보다 30% 많은 색상을 표현할 수 있다. 이 색상세트를 P3(광색역)이라 지칭한다. P3 색상을 사용하면 디자인 측면에서 더 높은 채도를 가진 색상을 사용가능할 수 있게 된다.
P3를 온전히 표현하기 위해 oklch 라는 표현법이 등장했다.
oklch(밝기 채도 색상각)으로 색을 표현한다.
기존의 색상 표현 방식을 rgb에서 oklch로 확대 하면서 sRGB 색 공간으로 제한을 받았던 부분의 색상을 더 생생하게 표현할 수 있게 됐다.
컨테이너 쿼리
Container Query
(요소의 부모 컨테이너 크기에 따라 CSS 스타일을 다르게 적용할 수 있는 기능) 지원이 기본 코어로 들어왔기 때문에 플러그인을 설정하지 않아도 된다. 부모요소에 @container 클래스를 추가하면 적용할 수 있다.
새로운 3D Form 유틸리티
3D 변환을 위한 새로운 유틸리티가 추가되었다.
간단하게 3D 표현을 할 수 있다.
- 회전:
rotate-x-*,rotate-y-*,rotate-z-* - 이동:
translate-z-* - 크기 조정:
scale-z-* - 원근:
perspective-,perspective-origin-
확장된 그라디언트
기존에는 그라디언트는 tailwind.config.js에 따로 설정을 했어야 했지만 gradient 기능이 추가 되었다.
<div class="bg-linear-45 from-indigo-500 via-purple-500 to-pink-500"></div>@starting-style 지원
@starting-style는 javaScript 없이 페이지에 요소가 표시되는 순간 애니메이션을 트리거할 수 있다.
새로운 CSS 기능으로 모든 브라우저 지원은 아님을 참고
기존 프로젝트 업그레이드 방법
기존의 tailwind.config.js를 아직은 legacy로 지원한다. 새로운 css파일로 마이그레이션 되지 않는 경우도 있으니, 직접 옮겨주면 된다.
