호환성

브라우저 지원

Tailwind CSS v4.0은 모던 브라우저를 대상으로 설계되었으며, 해당 버전에서 테스트를 거쳤습니다. 프레임워크의 핵심 기능은 특히 다음과 같은 브라우저 버전에 의존합니다:

• Chrome 120 (2023년 12월 출시)
• Safari 16.4 (2023년 3월 출시)
• Firefox 128 (2024년 7월 출시)

Tailwind는 또한 field-sizing: content, @starting-style, text-wrap: balance와 같이 브라우저 지원이 제한된 최신 플랫폼 기능도 포함하고 있습니다. 여러분의 프로젝트에서 이러한 모던 기능을 사용할지 여부는 선택에 달려 있습니다. 타겟팅하는 브라우저가 해당 기능을 지원하지 않는다면, 해당 유틸리티와 변형을 사용하지 않으면 됩니다.

특정 모던 플랫폼 기능의 지원 여부가 확실하지 않다면, Can I use 데이터베이스를 참고하면 좋습니다.

Sass, Less, 그리고 Stylus

Tailwind CSS v4.0은 특정 워크플로우를 위해 설계된 완전한 기능을 갖춘 CSS 빌드 도구입니다. 따라서 Sass, Less, Stylus와 같은 CSS 전처리기와 함께 사용하도록 설계되지 않았습니다.

Tailwind CSS 자체를 여러분의 전처리기로 생각하세요 — Sass와 Stylus를 함께 사용하지 않는 것과 같은 이유로 Tailwind와 Sass를 함께 사용하지 않아야 합니다.

Tailwind는 모던 브라우저를 위해 설계되었기 때문에, 중첩이나 변수와 같은 기능을 위해 전처리기가 필요하지 않습니다. Tailwind 자체가 import를 번들링하고 벤더 프리픽스를 추가하는 등의 작업을 처리합니다.

빌드 타임 임포트

Tailwind는 @import로 포함한 다른 CSS 파일을 자동으로 번들링합니다. 별도의 전처리 도구가 필요하지 않습니다.

@import "tailwindcss";@import "./typography.css";

이 예제에서 typography.css 파일은 Tailwind가 Sass나 postcss-import 같은 추가 도구 없이도 컴파일된 CSS에 자동으로 번들링됩니다.

변수

모든 최신 브라우저는 전처리기 없이도 네이티브 CSS 변수를 지원합니다:

.typography {  font-size: var(--text-base);  color: var(--color-gray-700);}

Tailwind는 내부적으로 CSS 변수를 많이 사용합니다. 따라서 프로젝트에서 Tailwind를 사용할 수 있다면, 네이티브 CSS 변수도 사용할 수 있습니다.

중첩(Nesting)

Tailwind는 내부적으로 Lightning CSS를 사용하여 다음과 같은 중첩된 CSS를 처리합니다:

.typography {  p {    font-size: var(--text-base);  }  img {    border-radius: var(--radius-lg);  }}

Tailwind는 이 중첩된 CSS를 평탄화하여 모든 모던 브라우저에서 이해할 수 있도록 변환합니다:

.typography p {  font-size: var(--text-base);}.typography img {  border-radius: var(--radius-lg);}

요즘은 네이티브 CSS 중첩 지원도 매우 좋기 때문에, Tailwind를 사용하지 않더라도 전처리기를 사용하지 않고도 중첩을 구현할 수 있습니다.

반복문

Tailwind에서는 이전에 반복문을 사용했던 종류의 클래스들(예: col-span-1, col-span-2 등)을 미리 정의할 필요 없이, 사용할 때마다 Tailwind가 자동으로 생성해 줍니다.

또한, Tailwind CSS로 작업할 때는 대부분의 스타일링을 CSS 파일이 아닌 HTML에서 처리합니다. 처음부터 많은 CSS를 작성하지 않기 때문에, 프로그램적으로 많은 커스텀 CSS 규칙을 생성하기 위해 설계된 반복문 같은 기능이 필요하지 않습니다.

색상 및 수학 함수

Sass나 Less 같은 전처리기를 사용할 때, darken이나 lighten 같은 함수를 사용해 색상을 조정해 본 적이 있을 겁니다.

Tailwind를 사용할 때는 프레임워크에 포함된 기본 색상 팔레트처럼 각 색상의 밝은 색과 어두운 색을 포함한 미리 정의된 색상 팔레트를 사용하는 것이 권장됩니다.

<button class="bg-indigo-500 hover:bg-indigo-600 ...">  <!-- ... --></button>

또한 color-mix() 같은 모던 CSS 기능을 사용해 브라우저에서 직접 런타임에 색상을 조정할 수도 있습니다. 이 기능은 CSS 변수나 currentcolor 키워드로 정의된 색상을 조정할 수 있게 해주는데, 이는 전처리기에서는 불가능한 기능입니다.

마찬가지로, 브라우저는 이제 min(), max(), round() 같은 수학 함수를 기본적으로 지원하므로, 이러한 기능을 위해 전처리기에 의존할 필요가 없습니다.

CSS 모듈

Tailwind는 CSS 모듈과 호환되며, 이미 CSS 모듈을 사용 중인 프로젝트에 Tailwind를 도입할 경우 함께 사용할 수 있습니다. 하지만 가능하다면 CSS 모듈과 Tailwind를 함께 사용하지 않는 것을 권장합니다.

스코프 문제

CSS 모듈은 HTML에서 커스텀 CSS를 작성하는 대신 유틸리티 클래스를 조합할 때 발생하지 않는 스코프 문제를 해결하기 위해 설계되었습니다.

Tailwind에서는 각 유틸리티 클래스가 어디에서 사용되든 항상 동일한 작업을 수행하기 때문에 스타일이 자연스럽게 스코프가 지정됩니다. UI의 한 부분에 유틸리티 클래스를 추가해도 다른 곳에서 예기치 않은 부작용이 발생할 위험이 없습니다.

성능

CSS 모듈을 사용할 때, Vite, Parcel, Turbopack 같은 빌드 도구는 각 CSS 모듈을 개별적으로 처리합니다. 즉, 프로젝트에 50개의 CSS 모듈이 있다면, Tailwind는 50번 별도로 실행되어야 합니다. 이로 인해 빌드 시간이 훨씬 느려지고 개발자 경험이 나빠질 수 있습니다.

명시적 컨텍스트 공유

CSS 모듈은 각각 별도로 처리되기 때문에, @theme을 임포트하지 않으면 사용할 수 없습니다.

이것은 @apply와 같은 기능이 예상대로 동작하지 않을 수 있다는 것을 의미합니다. 전역 스타일을 명시적으로 참조로 임포트해야만 테마 변수가 정의됩니다.

@reference "../app.css";button {  @apply bg-blue-500;}

또는 @apply 대신 CSS 변수를 사용할 수도 있습니다. 이 방법은 Tailwind가 해당 파일을 처리하지 않도록 하여 빌드 성능을 향상시킬 수 있다는 추가적인 이점이 있습니다.

button {  background: var(--color-blue-500);}

Vue, Svelte, 그리고 Astro

Vue, Svelte, 그리고 Astro는 컴포넌트 파일 내에서 CSS 모듈과 매우 유사하게 동작하는 <style> 블록을 지원합니다. 이는 각각 빌드 도구에 의해 완전히 분리되어 처리되며, 동일한 단점을 가지고 있습니다.

이러한 도구들과 함께 Tailwind를 사용한다면, 컴포넌트 내에서 <style> 블록을 사용하지 않고, 마크업에서 직접 유틸리티 클래스를 사용하여 스타일을 적용하는 것을 권장합니다. 이는 Tailwind가 의도한 사용 방식입니다.

만약 <style> 블록을 사용한다면, @apply와 같은 기능이 예상대로 동작하도록 전역 스타일을 참조로 가져오는 것이 중요합니다:

<template>  <button><slot /></button></template><style scoped>  @reference "../app.css";  button {    @apply bg-blue-500;  }</style>

또는 @apply와 같은 기능 대신 전역적으로 정의된 CSS 변수를 사용할 수도 있습니다. 이 경우 Tailwind가 컴포넌트 CSS를 처리할 필요가 없습니다:

<template>  <button><slot /></button></template><style scoped>  button {    background-color: var(--color-blue-500);  }</style>