Tailwind CSS v4: Vue/Svelte <style> 블록에서 @apply가 작동하지 않는 이슈

Tailwind CSS v4 버전으로 넘어오면서 컴파일러 아키텍처와 CSS 파싱 방식이 대폭 개편되었고, 기존 기능에서 호환성 문제가 좀 있었다. Vue의 <style> 블록이나 Svelte의 <style> 블록 내부에서 Tailwind의 유틸리티 클래스를 묶어주는 @apply 디렉티브가 제대로 작동하지 않았다.

일반적으로 중복되는 Tailwind 클래스를 묶어 재사용하고 싶을 때 아래와 같이 @apply를 사용한다.

<style scoped>
.my-custom-btn {
  /* 이렇게 기존에 제공되는 유틸리티들을 묶어 쓰고 싶은데 작동하지 않음 */
  @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
  
  /* 어쩔 수 없이 순수 CSS로 풀어써야 함 */
  text-align: right; 
}
</style>

v4(특히 4.0.0-beta 버전대) 빌드 도구 환경에서 위 코드를 작성하면, 빌드 파이프라인에서 해당 디렉티브를 해석하지 못하거나 빌드 에러, 혹은 스타일이 무시되었다.

이는 Tailwind v4가 Vite나 프레임워크 자체의 CSS 처리 파이프라인과 통합되는 방식이 완전히 달라졌기 때문이다. 이 이슈는 Tailwind Labs의 공식 Github Discussion #15205에서도 활발히 논의되고 있다.

플러그인 업데이트나 프레임워크 플러그인의 지원이 완전해질 때까지는, 프레임워크 컴포넌트 내부 <style> 블록에서의 @apply 사용을 자제하고 대신 React의 className 조립이나 Vue/Svelte의 클래스 바인딩, 혹은 Tailwind의 최상위 index.css 파일에서 @apply를 정의하여 사용하는 우회 방식을 권장한다.