Tailwind CSS v4: 새로운 기능과 마이그레이션

1. Tailwind CSS v4 소개

Tailwind CSS v4는 최근에 출시된 새로운 버전입니다. 이 버전에서는 다양한 새로운 기능과 변경 사항이 적용되었습니다. Tailwind CSS v4의 새로운 기능과 마이그레이션 방법에 대해 자세히 알아보겠습니다.

Tailwind CSS v4의 주요 변경 사항에는 새로운 유틸리티 클래스, 기존 클래스의 변경 사항, 새로운 설정 옵션 등이 있습니다. 이러한 변경 사항은 개발자들이 더 효율적으로 코드를 작성하고 유지보수할 수 있도록 도와줍니다.

2. 새로운 기능과 변경 사항

Tailwind CSS v4에서는 새로운 유틸리티 클래스가 추가되었습니다. 예를 들어, justify-items 클래스를 사용하여 아이템을 정렬할 수 있습니다.

<div class="flex justify-items-center">
  <div>아이템 1</div>
  <div>아이템 2</div>
  <div>아이템 3</div>
</div>

기존 클래스의 변경 사항도 있습니다. 예를 들어, text-lg 클래스의 크기가 변경되었습니다.

.text-lg {
  font-size: 1.125rem; /* 변경된 크기 */
}

3. Tailwind CSS v4 마이그레이션

v3에서 v4로 마이그레이션하는 방법은 다음과 같습니다. 먼저, Tailwind CSS를 업데이트합니다.

npm install tailwindcss@latest

그런 다음, 설정 파일을 업데이트합니다.

module.exports = {
  // ...
  theme: {
    extend: {
      // ...
    }
  }
}

마이그레이션 후에는 반드시 테스트를 수행해야 합니다. 예를 들어, UI 컴포넌트가 올바르게 렌더링되는지 확인합니다.

4. 실습 예제: Tailwind CSS v4 사용하기

새로운 유틸리티 클래스를 사용하는 예제입니다.

<div class="flex justify-items-center align-items-center">
  <div>아이템 1</div>
  <div>아이템 2</div>
  <div>아이템 3</div>
</div>

기존 클래스의 변경 사항을 적용하는 예제입니다.

<div class="text-lg">텍스트</div>

커스텀 설정 옵션을 사용하는 예제입니다.

module.exports = {
  theme: {
    extend: {
      colors: {
        custom: '#3498db'
      }
    }
  }
}

이러한 예제를 통해 Tailwind CSS v4의 새로운 기능과 변경 사항을 익숙하게 사용할 수 있습니다.