tailwind css 버전4부터 네스팅 지원 > 메모

Tailwind CSS는 버전 4부터 네이티브 CSS 네스팅을 직접 지원합니다.
별도의 플러그인 설정 없이 표준 CSS 문법을 사용하여 중첩된 스타일을 바로 사용할 수 있으며, 이는 프리프로세서 없이도 가능하다는 장점이 있습니다.

Tailwind CSS 네스팅 지원 방법

1. Tailwind CSS 버전 4 이상 사용: 네이티브 CSS 네스팅은 Tailwind CSS v4.0 이상에서 지원됩니다.
2. 표준 CSS 문법 사용: 별도 설정 없이 표준 CSS 네스팅 문법을 사용하여 스타일을 작성합니다.

.card {
  @apply rounded-lg shadow-lg p-6; /* Tailwind CSS 유틸리티 클래스 */

  .card-title {
    @apply text-xl font-bold mb-2;
  }

  .card-content {
    @apply text-gray-700;
  }
}

위 예시처럼 @apply를 사용하여 Tailwind 유틸리티 클래스를 포함하면서도, CSS의 네이티브 네스팅 기능을 활용하여 구조적으로 스타일을 작성할 수 있습니다.