업그레이드 가이드

업그레이드 가이드 (Upgrade Guide)

Tailwind CSS v4.0은 프레임워크의 새로운 메이저 버전이라, 파괴적 변경을 최소화하기 위해 많은 노력을 기울였지만 일부 업데이트가 필요해요. 이 가이드는 프로젝트를 v3에서 v4로 업그레이드하는 데 필요한 모든 단계를 안내해요.

Tailwind CSS v4.0은 Safari 16.4+, Chrome 111+, Firefox 128+를 대상으로 설계됐어요. 더 오래된 브라우저를 지원해야 한다면, 브라우저 지원 요건이 바뀔 때까지 v3.4를 사용하세요.

출처: 문서

본문

업그레이드 도구 사용하기 (Using the upgrade tool)

프로젝트를 v3에서 v4로 업그레이드하려면 업그레이드 도구를 사용해서 대부분의 어려운 작업을 자동으로 처리할 수 있어요.

$ npx @tailwindcss/upgrade

대부분의 프로젝트에서 업그레이드 도구는 의존성 업데이트, 설정 파일을 CSS로 마이그레이션, 템플릿 파일 변경 처리까지 전체 마이그레이션 과정을 자동화해요.

업그레이드 도구는 Node.js 20 이상이 필요하므로, 실행하기 전에 환경을 업데이트하세요.

업그레이드 도구는 새 브랜치에서 실행한 뒤, diff를 신중하게 검토하고 브라우저에서 프로젝트를 테스트해서 모든 변경이 올바른지 확인하는 것을 권장해요. 복잡한 프로젝트에서는 몇 가지를 수동으로 다듬어야 할 수도 있지만, 어쨌든 도구가 많은 시간을 절약해 줄 거예요.

또한 v4의 모든 파괴적 변경을 훑어보고 무엇이 바뀌었는지 잘 이해하는 것도 좋아요. 업그레이드 도구가 잡지 못하는 프로젝트의 다른 부분을 수동으로 업데이트해야 할 수도 있으니까요.

수동으로 업그레이드하기 (Upgrading manually)

PostCSS 사용하기 (Using PostCSS)

v3에서는 tailwindcss 패키지가 PostCSS 플러그인이었지만, v4에서는 PostCSS 플러그인이 전용 @tailwindcss/postcss 패키지에 있어요.

또한 v4에서는 import와 vendor prefixing이 자동으로 처리되므로, 프로젝트에 postcss-import와 autoprefixer가 있다면 제거할 수 있어요.

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

Vite 사용하기 (Using Vite)

Vite를 사용한다면, 성능 향상과 최고의 개발자 경험을 위해 PostCSS 플러그인 대신 새 전용 Vite 플러그인으로 마이그레이션하는 것을 권장해요.

import { defineConfig } from "vite";
import tailwindcss from "@tailwindcss/vite";

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

Tailwind CLI 사용하기 (Using Tailwind CLI)

v4에서 Tailwind CLI는 전용 @tailwindcss/cli 패키지에 있어요. 빌드 명령을 새 패키지를 사용하도록 업데이트하세요.

npx tailwindcss -i input.css -o output.css
npx @tailwindcss/cli -i input.css -o output.css

v3에서 달라진 점 (Changes from v3)

Tailwind CSS v4.0의 모든 파괴적 변경의 종합 목록이에요.

업그레이드 도구가 대부분의 변경을 자동으로 처리해 주므로, 가능하다면 사용하는 것을 적극 권장해요.

브라우저 요구 사항 (Browser requirements)

Tailwind CSS v4.0은 현대 브라우저를 위해 설계됐으며 Safari 16.4, Chrome 111, Firefox 128을 대상으로 해요. @property, color-mix() 같은 현대 CSS 기능을 핵심 프레임워크 기능에 의존하기 때문에, Tailwind CSS v4.0은 오래된 브라우저에서는 동작하지 않아요.

오래된 브라우저를 지원해야 한다면 지금은 v3.4를 사용할 것을 권장해요. 더 빨리 업그레이드할 수 있도록 호환 모드를 적극적으로 연구 중이며, 앞으로 더 소식을 알릴 수 있기를 기대해요.

@tailwind 지시어 제거 (Removed @tailwind directives)

v4에서는 @tailwind 지시어가 아닌 일반 CSS @import 문으로 Tailwind를 가져와요.

@tailwind base;
@tailwind components;
@tailwind utilities;

@import "tailwindcss";

더 이상 사용되지 않는 유틸리티 제거 (Removed deprecated utilities)

v3에서 더 이상 사용되지 않고(document 되지 않은 지) 몇 년이 지난 유틸리티를 제거했어요. 제거된 목록과 현대적인 대안은 다음과 같아요.

Deprecated	Replacement
bg-opacity-*	Use opacity modifiers like bg-black/50
text-opacity-*	Use opacity modifiers like text-black/50
border-opacity-*	Use opacity modifiers like border-black/50
divide-opacity-*	Use opacity modifiers like divide-black/50
ring-opacity-*	Use opacity modifiers like ring-black/50
placeholder-opacity-*	Use opacity modifiers like placeholder-black/50
flex-shrink-*	shrink-*
flex-grow-*	grow-*
overflow-ellipsis	text-ellipsis
decoration-slice	box-decoration-slice
decoration-clone	box-decoration-clone

이름이 바뀐 유틸리티 (Renamed utilities)

v4에서 다음 유틸리티의 이름을 더 일관되고 예측 가능하도록 바꿨어요.

v3	v4
shadow-sm	shadow-xs
shadow	shadow-sm
drop-shadow-sm	drop-shadow-xs
drop-shadow	drop-shadow-sm
blur-sm	blur-xs
blur	blur-sm
backdrop-blur-sm	backdrop-blur-xs
backdrop-blur	backdrop-blur-sm
rounded-sm	rounded-xs
rounded	rounded-sm
outline-none	outline-hidden
ring	ring-3

섀도우/반경/블러 스케일 업데이트 (Updated shadow, radius, and blur scales)

모든 유틸리티에 이름 있는 값을 제공하기 위해 기본 shadow, radius, blur 스케일의 이름을 바꿨어요. "베어(bare)" 버전은 하위 호환을 위해 계속 동작하지만, <utility>-sm 유틸리티는 각자의 <utility>-xs 버전으로 업데이트하지 않으면 다르게 보일 거예요.

이 변경에 맞춰 프로젝트를 업데이트하려면 v3 유틸리티를 모두 v4 버전으로 교체하세요.

<input class="shadow-sm" />
<input class="shadow-xs" />
<input class="shadow" />
<input class="shadow-sm" />

outline 유틸리티 이름 변경 (Renamed outline utility)

outline 유틸리티는 이제 border, ring 유틸리티와 더 일관되도록 기본적으로 outline-width: 1px를 설정해요. 또한 모든 outline-<number> 유틸리티는 기본 outline-style을 solid로 설정해서, outline과 조합할 필요가 없어졌어요.

<input class="outline outline-2" />
<input class="outline-2" />

outline-none 유틸리티는 이전에 실제로 outline-style: none을 설정하지 않았고, 대신 접근성을 위해 forced colors 모드에서도 여전히 나타나는 보이지 않는 outline을 설정했어요.

이를 더 명확하게 하기 위해 이 유틸리티의 이름을 outline-hidden으로 바꾸고, 실제로 outline-style: none을 설정하는 새로운 outline-none 유틸리티를 추가했어요.

이 변경에 맞춰 프로젝트에서 outline-none 사용을 모두 outline-hidden으로 교체하세요.

<input class="focus:outline-none" />
<input class="focus:outline-hidden" />

기본 ring 너비 변경 (Default ring width change)

v3에서는 ring 유틸리티가 3px 링을 추가했어요. v4에서는 border와 outline과 일관되도록 1px로 변경했어요.

이 변경에 맞춰 ring 사용을 모두 ring-3으로 교체하세요.

<input class="ring ring-blue-500" />
<input class="ring-3 ring-blue-500" />

space-between 선택자 (Space-between selector)

큰 페이지에서 심각한 성능 문제를 해결하기 위해 space-x-*와 space-y-* 유틸리티가 사용하는 선택자를 변경했어요.

/* Before */
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  margin-top: 1rem;
}
/* Now */
.space-y-4 > :not(:last-child) {
  margin-bottom: 1rem;
}

이 유틸리티를 인라인 요소와 함께 사용했거나, 간격을 조절하기 위해 자식 요소에 다른 margin을 추가했다면 프로젝트에서 변경 사항이 보일 수 있어요.

이 변경으로 프로젝트에 문제가 생긴다면, flex나 grid 레이아웃으로 마이그레이션하고 gap을 사용할 것을 권장해요.

<div class="space-y-4 p-4">
<div class="flex flex-col gap-4 p-4">
  <label for="name">Name</label>
  <input type="text" name="name" />
</div>

divide 선택자 (Divide selector)

큰 페이지의 심각한 성능 문제를 해결하기 위해 divide-x-*와 divide-y-* 유틸리티가 사용하는 선택자를 변경했어요.

/* Before */
.divide-y-4 > :not([hidden]) ~ :not([hidden]) {
  border-top-width: 4px;
}
/* Now */
.divide-y-4 > :not(:last-child) {
  border-bottom-width: 4px;
}

이 유틸리티를 인라인 요소와 함께 사용했거나, 간격을 조절하기 위해 자식 요소에 다른 margin/padding을 추가했거나, 특정 자식 요소의 border를 조절했다면 프로젝트에서 변경 사항이 보일 수 있어요.

그라디언트와 변형 사용 (Using variants with gradients)

v3에서는 변형(variant)으로 그라디언트의 일부를 덮어쓰면 전체 그라디언트가 "리셋"됐어요. 그래서 이 예제에서는 다크 모드에서 to-* 색이 노란색 대신 투명해졌어요.

<div class="bg-gradient-to-r from-red-500 to-yellow-400 dark:from-blue-500">
  <!-- ... -->
</div>

v4에서는 이 값이 보존되는데, 이는 Tailwind의 다른 유틸리티와 더 일관된 방식이에요.

즉, 특정 상태에서 3-스톱 그라디언트를 2-스톱 그라디언트로 "해제(unset)"하려면 via-none을 명시적으로 사용해야 할 수도 있어요.

<div class="bg-linear-to-r from-red-500 via-orange-400 to-yellow-400 dark:via-none dark:from-blue-500 dark:to-teal-400">
  <!-- ... -->
</div>

컨테이너 설정 (Container configuration)

v3에서는 container 유틸리티에 center, padding 같은 설정 옵션이 여러 개 있었지만, v4에서는 더 이상 존재하지 않아요.

v4에서 container 유틸리티를 커스터마이즈하려면 @utility 지시어로 확장하세요.

@utility container {
  margin-inline: auto;
  padding-inline: 2rem;
}

기본 border 색상 (Default border color)

v3에서는 border-*와 divide-* 유틸리티가 기본적으로 설정된 gray-200 색상을 사용했어요. v4에서는 Tailwind가 덜 독단적이고 브라우저 기본값과 일치하도록 currentColor로 변경했어요.

이 변경에 맞춰 border-*나 divide-* 유틸리티를 사용하는 모든 곳에서 색상을 지정하세요.

<div class="border border-gray-200 px-2 py-3 ...">
  <!-- ... -->
</div>

또는 다음 기본 스타일을 프로젝트에 추가해서 v3 동작을 유지할 수도 있어요.

@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentColor);
  }
}

기본 ring 너비와 색상 (Default ring width and color)

ring 유틸리티의 너비를 3px에서 1px로, 기본 색상을 blue-500에서 currentColor로 변경해서 border-*, divide-*, outline-* 유틸리티와 더 일관되게 만들었어요.

이 변경에 맞춰 ring을 사용한 곳을 ring-3으로 교체하세요.

<button class="focus:ring ...">
<button class="focus:ring-3 ...">
  <!-- ... -->
</button>

그런 다음 기본 ring 색상에 의존하던 곳에는 ring-blue-500을 추가하세요.

<button class="focus:ring-3 focus:ring-blue-500 ...">
  <!-- ... -->
</button>

또는 다음 테마 변수를 CSS에 추가해서 v3 동작을 유지할 수도 있어요.

@theme {
  --default-ring-width: 3px;
  --default-ring-color: var(--color-blue-500);
}

다만 이 변수들은 호환성 목적으로만 지원되며, Tailwind CSS v4.0의 관용적인 사용은 아니라는 점을 기억하세요.

Preflight 변경 (Preflight changes)

v4에서 Preflight의 기본 스타일에 몇 가지 작은 변경을 만들었어요.

새로운 기본 placeholder 색상 (New default placeholder color)

v3에서는 placeholder 텍스트가 기본적으로 설정된 gray-400 색상을 사용했어요. v4에서는 이를 단순화해서 현재 텍스트 색상의 50% 투명도를 사용해요.

아마 이 변경을 알아차리지도 못할 거예요(어쩌면 프로젝트가 더 좋아 보이게 만들 수도 있어요). 하지만 v3 동작을 유지하려면 다음 CSS를 프로젝트에 추가하세요.

@layer base {
  input::placeholder,
  textarea::placeholder {
    color: var(--color-gray-400);
  }
}

버튼은 기본 커서 사용 (Buttons use the default cursor)

버튼은 이제 브라우저 기본 동작에 맞춰 cursor: pointer 대신 cursor: default를 사용해요.

기본적으로 cursor: pointer를 계속 사용하려면 다음 기본 스타일을 CSS에 추가하세요.

@layer base {
  button:not(:disabled),
  [role="button"]:not(:disabled) {
    cursor: pointer;
  }
}

다이얼로그 margin 제거 (Dialog margins removed)

Preflight는 이제 다른 요소가 리셋되는 방식과 일관되도록 <dialog> 요소의 margin을 리셋해요.

다이얼로그가 기본적으로 가운데 정렬되길 원한다면 다음 CSS를 프로젝트에 추가하세요.

@layer base {
  dialog {
    margin: auto;
  }
}

hidden 속성이 우선 (Hidden attribute takes priority)

block이나 flex 같은 display 클래스는 더 이상 요소의 hidden 속성보다 우선하지 않아요. 요소를 사용자에게 보이게 하려면 hidden 속성을 제거하세요. 이는 hidden="until-found"에는 적용되지 않는다는 점을 기억하세요.

프리픽스 사용하기 (Using a prefix)

프리픽스는 이제 변형(variant)처럼 보이며 항상 클래스 이름의 맨 앞에 위치해요.

<div class="tw:flex tw:bg-red-500 tw:hover:bg-red-600">
  <!-- ... -->
</div>

프리픽스를 사용할 때도 프리픽스를 사용하지 않는 것처럼 테마 변수를 설정해야 해요.

@import "tailwindcss" prefix(tw);
@theme {
  --font-display: "Satoshi", "sans-serif";
  --breakpoint-3xl: 120rem;
  --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);
  /* ... */
}

생성된 CSS 변수에는 프로젝트의 기존 변수와의 충돌을 피하기 위해 프리픽스가 포함돼요.

:root {
  --tw-font-display: "Satoshi", "sans-serif";
  --tw-breakpoint-3xl: 120rem;
  --tw-color-avocado-100: oklch(0.99 0 0);
  --tw-color-avocado-200: oklch(0.98 0.04 113.22);
  --tw-color-avocado-300: oklch(0.94 0.11 115.03);
  /* ... */
}

important 수식어 (The important modifier)

v3에서는 유틸리티 이름의 맨 앞(변형 이후)에 !를 배치해서 important로 표시할 수 있었어요. v4에서는 클래스 이름 맨 끝에 !를 배치해야 해요.

<div class="flex! bg-red-500! hover:bg-red-600/50!">
  <!-- ... -->
</div>

옛 방식은 호환성을 위해 계속 지원되지만 더 이상 사용하지 않는 것이 좋아요(deprecated).

커스텀 유틸리티 추가 (Adding custom utilities)

v3에서는 @layer utilities나 @layer components 안에 정의한 커스텀 클래스가 Tailwind에 의해 진짜 유틸리티 클래스로 인식되고 hover, focus, lg 같은 변형과 자동으로 동작했어요. 차이는 @layer components가 생성된 스타일시트에서 항상 먼저 온다는 것이었어요.

v4에서는 네이티브 cascade layers를 사용하고 더 이상 @layer at-rule을 가로채지 않기 때문에, 대체 API로 @utility를 도입했어요.

@layer utilities {
  .tab-4 {
    tab-size: 4;
  }
}

@utility tab-4 {
  tab-size: 4;
}

커스텀 유틸리티는 이제 정의하는 속성의 개수에 따라 정렬돼요. 즉, 이 .btn 같은 컴포넌트 유틸리티는 추가 설정 없이도 다른 Tailwind 유틸리티가 덮어쓸 수 있어요.

@layer components {
  .btn {
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
    background-color: ButtonFace;
  }
}

@utility btn {
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  background-color: ButtonFace;
}

커스텀 유틸리티 등록에 대해 더 알아보려면 adding custom utilities 문서를 확인해 보세요.

변형 쌓기 순서 (Variant stacking order)

v3에서는 쌓인 변형이 오른쪽에서 왼쪽으로 적용됐지만, v4에서는 CSS 문법처럼 보이도록 왼쪽에서 오른쪽으로 적용하도록 변경했어요.

이 변경에 맞춰 프로젝트에서 순서에 민감한 쌓인 변형의 순서를 뒤집으세요.

<ul class="py-4 first:*:pt-0 last:*:pb-0">
<ul class="py-4 *:first:pt-0 *:last:pb-0">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

아마 이런 변형은 거의 없을 거예요. 직접 자식 변형(*)과 타이포그래피 플러그인 변형(prose-headings)이 가장 흔할 텐데, 그것도 다른 변형과 쌓았을 때만 해당돼요.

임의 값 안의 변수 (Variables in arbitrary values)

v3에서는 var() 없이 CSS 변수를 임의 값으로 사용할 수 있었어요. 하지만 최근 CSS 업데이트로 이것은 종종 모호해질 수 있어서, v4에서는 이 문법을 대괄호 대신 괄호를 사용하도록 변경했어요.

이 변경에 맞춰 옛 변수 약어 문법을 새 변수 약어 문법으로 교체하세요.

<div class="bg-[--brand-color]"></div>
<div class="bg-(--brand-color)"></div>

grid와 object-position 유틸리티의 임의 값 (Arbitrary values in grid and object-position utilities)

grid-cols-*, grid-rows-*, object-* 유틸리티의 임의 값에서는 콤마가 이전에 공백으로 대체됐어요. 이 특별한 동작은 Tailwind CSS v3에서 v2와의 호환을 위해 존재했어요. 이 호환성은 v4.0에서 더 이상 존재하지 않으며, 공백을 나타내려면 밑줄(underscore)을 사용해야 해요.

이 변경에 맞춰 공백을 의미했던 콤마를 밑줄로 교체하세요.

<div class="grid-cols-[max-content,auto]"></div>
<div class="grid-cols-[max-content_auto]"></div>

모바일에서의 호버 스타일 (Hover styles on mobile)

v4에서는 기본 입력 장치가 hover를 지원할 때만 hover 변형이 적용되도록 변경했어요.

@media (hover: hover) {
  .hover\:underline:hover {
    text-decoration: underline;
  }
}

터치 장치가 탭할 때 hover가 트리거되는 방식에 의존하도록 사이트를 구축했다면 문제가 생길 수 있어요. 이 경우 옛 구현을 사용하는 자신만의 변형으로 hover 변형을 덮어쓸 수 있어요.

@custom-variant hover (&:hover);

일반적으로는 hover 기능을 향상(enhancement)으로 취급하고, 터치 장치는 실제로 hover할 수 없으므로 사이트가 동작하는 데 의존하지 않는 것을 권장해요.

outline-color 전환 (Transitioning outline-color)

transition과 transition-colors 유틸리티에 이제 outline-color 속성이 포함돼요.

즉, focus 시 커스텀 색상으로 outline을 추가했다면 색상이 기본 색에서 전환되는 것을 보게 될 거예요. 이를 피하려면 outline 색상을 조건 없이 설정하거나, 두 상태 모두에 명시적으로 설정하세요.

<button class="transition hover:outline-2 hover:outline-cyan-500"></button>
<button class="outline-cyan-500 transition hover:outline-2"></button>

개별 transform 속성 (Individual transform properties)

rotate-*, scale-*, translate-* 유틸리티는 이제 CSS의 개별 rotate, scale, translate 속성을 기반으로 해요. 일반적으로 동작에 영향은 없지만, 주의해야 할 몇 가지 경우가 있어요.

Transforms 리셋하기 (Resetting Transforms)

이전에는 transform-none으로 rotate, scale, translate 유틸리티를 "리셋"할 수 있었어요. 이제는 동작하지 않으므로 개별 속성을 리셋해야 해요.

<button class="scale-150 focus:transform-none"></button>
<button class="scale-150 focus:scale-none"></button>

트랜지션 (Transitions)

전환되는 속성 목록을 커스터마이즈하고 transform을 포함한다면(예: transition-[opacity,transform] 작성), 이 유틸리티들은 더 이상 전환되지 않아요. 이 문제를 해결하려면 목록에 개별 속성을 포함하세요. 예를 들어 opacity-*와 scale-* 유틸리티를 사용할 때 변경을 전환하려면 transition-[opacity,scale]을 사용해야 해요.

<button class="transition-[opacity,transform] hover:scale-150"></button>
<button class="transition-[opacity,scale] hover:scale-150"></button>

핵심 플러그인 비활성화 (Disabling core plugins)

v3에는 프레임워크의 특정 유틸리티를 완전히 비활성화하는 데 사용할 수 있는 corePlugins 옵션이 있었어요. v4에서는 더 이상 지원되지 않아요.

theme() 함수 사용하기 (Using the theme() function)

v4는 모든 테마 값에 대한 CSS 변수를 포함하므로, 가능할 때마다 theme() 함수 대신 이 변수들을 사용할 것을 권장해요.

.my-class {
  background-color: theme(colors.red.500);
  background-color: var(--color-red-500);
}

여전히 theme() 함수를 사용해야 하는 경우(미디어 쿼리처럼 CSS 변수를 지원하지 않는 경우)에는 옛 점(dot) 표기법 대신 CSS 변수 이름을 사용하세요.

@media (width >= theme(screens.xl)) {
@media (width >= theme(--breakpoint-xl)) {
  /* ... */
}

JavaScript 설정 파일 사용하기 (Using a JavaScript config file)

JavaScript 설정 파일은 하위 호환성을 위해 여전히 지원되지만, v4에서는 더 이상 자동으로 감지되지 않아요.

여전히 JavaScript 설정 파일을 사용해야 한다면 @config 지시어로 명시적으로 로드할 수 있어요.

@config "../../tailwind.config.js";

JavaScript 기반 설정의 corePlugins, safelist, separator 옵션은 v4.0에서 지원되지 않아요. v4에서 유틸리티를 safelist하려면 @source inline()을 사용하세요.

JavaScript에서의 테마 값 (Theme values in JavaScript)

v3에서는 JavaScript 기반 설정을 다른 JavaScript에서 사용할 수 있는 평평한 객체로 바꿔주는 resolveConfig 함수를 내보냈어요.

v4에서는 이를 제거했어요. 대신 생성하는 CSS 변수를 직접 사용할 수 있기를 기대하는데, 이는 훨씬 간단하고 번들 크기를 크게 줄여줄 거예요.

예를 들어 인기 있는 React용 Motion 라이브러리는 CSS 변수 값 사이를 애니메이션할 수 있게 해줘요.

<motion.div animate={{ backgroundColor: "var(--color-blue-500)" }} />

JS에서 해석된 CSS 변수 값에 접근해야 한다면 getComputedStyle을 사용해서 문서 루트에서 테마 변수의 값을 얻을 수 있어요.

let styles = getComputedStyle(document.documentElement);
let shadow = styles.getPropertyValue("--shadow-xl");

Vue, Svelte 또는 CSS modules에서 @apply 사용하기 (Using @apply with Vue, Svelte, or CSS modules)

v4에서는 메인 CSS 파일과 별도로 번들되는 스타일시트(예: CSS modules 파일, Vue/Svelte/Astro의 <style> 블록 등)는 다른 파일에 정의된 테마 변수, 커스텀 유틸리티, 커스텀 변형에 접근할 수 없어요.

이러한 컨텍스트에서 이 정의를 사용하려면 번들에 CSS를 중복하지 않고 가져오는 @reference를 사용하세요.

<template>
  <h1>Hello world!</h1>
</template>

<style>
  @reference "../../app.css";
  h1 {
    @apply text-2xl font-bold text-red-500;
  }
</style>

또는 @apply를 전혀 사용하지 않고 CSS 테마 변수를 직접 사용해도 돼요. Tailwind가 이 스타일을 처리할 필요가 없어져 성능도 향상되죠.

<template>
  <h1>Hello world!</h1>
</template>

<style>
  h1 {
    color: var(--text-red-500);
  }
</style>

CSS modules와 함께 Tailwind를 사용하는 방법에 대한 더 많은 문서를 찾을 수 있어요.

Sass, Less, Stylus 사용하기 (Using Sass, Less, and Stylus)

Tailwind CSS v4.0은 Sass, Less, Stylus 같은 CSS 전처리기와 함께 사용하도록 설계되지 않았어요. Tailwind CSS 자체를 전처리기로 생각하세요. Sass를 Stylus와 함께 사용하지 않는 것과 같은 이유로 Tailwind를 Sass와 함께 사용하면 안 돼요. 이런 이유로 여러분의 스타일시트나 Vue/Svelte/Astro 등의 <style> 블록에서 Sass, Less, Stylus를 사용할 수 없어요.

자세한 내용은 compatibility 문서에서 알아보세요.

더 알아보기 (Learn more)