[CSS] TailwindCSS 4.0 정리

insung·2025년 4월 16일

CSS tailwind tailwind 4.0

CSS

목록 보기

6/14

학습자료 : https://youtu.be/2Q7x3LNZPJs?si=jNbM8-KaDp07or4M

Tailwind CSS 4.0

테일윈드 CSS 4.0 출시로 웹 개발자들은 더욱 향상된 성능과 유연성을 경험할 수 있게 되었음.
기존 버전의 문제였던 빌드 시간을 획기적으로 단축하여, 이제 개발자가 효율적으로 작업할 수 있는 환경이 조성되었음.
자동 콘텐츠 탐지 및 내장 임포트 지원과 같은 새로운 기능들은 프로젝트를 관리하는 시간을 크게 줄여주며, CSS 파일에서 직접 프레임워크를 커스터마이징할 수 있는 등의 경험 개선도 이루어졌음.
테일윈드 CSS 4.0은 현대 웹 플랫폼의 장점을 최대한 활용하여 더욱 강력한 퍼포먼스를 제공

1. 🚀 Tailwind CSS 4.0의 혁신적인 성능 개선 및 설치 용이성

테일윈드 CSS 4.0은 새로운 고성능 엔진을 통해 전체 빌드 속도가 3.78배 빨라졌고, CSS 추가 시 빌드 속도는 8배 이상, 그리고 CSS가 추가되지 않은 경우에는 182배가량 빨라졌음.
이 버전은 캐스케이드 레이어, 컬러 믹스, 로지컬 프로퍼티와 같은 최신 CSS 기능을 도입하여 웹 개발의 유연성과 현대성을 크게 높였음.
설치 과정도 간단해져 한 줄의 코드 추가로 테일윈드를 바로 사용할 수 있으며, 의존성이 감소하고, 불필요한 설정과 임포트 과정이 제거되었음. Vite 플러그인을 통해 PostCSS 대신 테일윈드 CSS와 통합하여, 더 빠르고 효율적인 개발 환경을 제공

2. 🚀 Tailwind CSS 4.0의 자동 콘텐츠 탐지 기능

자동 콘텐츠 탐지 기능은 이제 템플릿 파일을 자동으로 감지하여 별도의 설정 없이 사용 가능.
.gitignore 파일의 예외 처리가 자동으로 이루어져, 수동 처리의 필요성이 사라졌음.
이진 파일 확장자(예: 이미지, 비디오, PDF)도 자동으로 무시되며, 추가 리소스를 포함할 경우 @tailwind 디렉티브를 사용하여 처리할 수 있음.
이 기능 덕분에 프로젝트 관리에 드는 시간과 노력이 대폭 줄어 들었고, 내장된 임포트 지원으로 여러 개의 CSS 파일을 쉽고 간편하게 번들링할 수 있으며, 추가 도구나 설정이 필요 없음.

3. 🎉 Tailwind CSS 4.0의 주요 변경 사항

CSS First 구성 방식이 도입되어 이제 자바스크립트 설정 파일 대신 CSS 파일에서 프레임워크를 커스터마이징하고 확장할 수 있게 되었음.
Tailwind CSS 4.0에서는 디자인 토큰을 CSS 변수로 자동 변환하는 기능이 추가되어 UI 라이브러리와 모바일 앱에서 쉽게 활용할 수 있음. 동적 유틸리티 값과 변형 지원으로 인해 숫자만 입력하면 자동으로 스타일이 생성되며, 커스터마이징의 범위가 확대되었음.

3.1. Tailwind CSS 4.0의 새로운 CSS First 구조
- Tailwind CSS 4.0에서는 CSS First 구성 방식이 도입되어, JavaScript가 아닌 CSS 파일에서 직접 프레임워크를 커스터마이징하고 확장할 수 있게 되었음.
- 이전 버전에서는 tailwind.config.js 파일에서 설정을 작성해야 했지만, 이제 CSS 파일에서 커스터마이징 설정을 추가할 수 있어 개발자 경험이 개선되었음.
- 새로운 기능으로 디자인 토큰을 CSS 변수로 자동 변환하여, 커스터마이징 속성을 작성하면 해당 CSS 변수가 자동으로 생성.
- CSS 변수를 통해 UI 라이브러리나 모바일 앱에서도 손쉬운 접근이 가능하게 되었으며, 이 기능은 매우 유용. 또한, 동적 유틸리티 값과 변형 지원으로 이제는 공간 스케일의 값을 추측할 필요가 없으며, 예를 들어 grid-cols-15와 같은 정의 되지 않았던 속성을 동적으로 사용할 수 있게 되었음.

  @import "tailwindcss";
  @theme {
    --font-display: "Satoshi", "sans-serif";
    --breakpoint-3xl: 1920px;
    --color-avocado-100: oklch(0.99 0 0);
  }

P3 색상 팔레트가 도입되어 더 선명하고 생생한 색상을 사용할 수 있으며, 기존 RGB 방식에서 재설계되었음. 컨테이너 쿼리와 같은 동적 스타일 변경 기능이 기본으로 포함되어 더 많은 레이아웃 옵션을 제공.
3.2. Tailwind CSS 4.0의 색상 시스템 개선 및 새로운 기능
- 테일윈드 4.0에서는 P3 색상 팔레트가 새롭게 추가되어 색상 시스템이 대폭 개선되었음. 기존의 RGB 방식에서 현대적인 디스플레이 기술을 최대한 활용할 수 있도록 P3 모델로 재설계되었음.
- 이를 통해 더욱 선명하고 생생한 색상 사용이 가능하게 되었음. 또한, 컨테이너 쿼리 지원이 새롭게 추가되어 요소의 스타일을 컨테이너 크기에 따라 동적으로 변경할 수 있게 되었음.
- 예전에는 이 기능을 사용하기 위해 플러그인을 설치해야 했으나, 이제는 테일윈드 4.0에 기본으로 포함되어 사용이 가능.

      .sidebar {
      width: 20%;
    }

    @container (min-width: 800px) {
      .sidebar {
        width: 15%;
      }

3.3. Tailwind CSS 4.0의 새롭게 추가된 기능들
- 3D 변형 유틸리티가 추가되어, rotate-x, rotate-y, scale-z, translate-z 클래스 덕분에 HTML 코드에서 바로 3D 공간에 변형을 적용할 수 있게 되었음.
- 그라디언트 기능이 확장되어 방사형, 원형, conic-gradient와 같은 다양한 옵션을 활용할 수 있게 되어, 웹에서 다채로운 시각적 효과를 구현할 수 있게 되었음.
- 새롭게 @starting-style이 추가되어, 진입 및 퇴장 전환 효과를 쉽게 구현할 수 있게 되었음. 이제 JavaScript 없이도 간단한 애니메이션을 처리할 수 있게 되었지만, 아직 모든 브라우저에서 완벽하게 지원되지는 않음.
- 다만, 브라우저 지원이 점차적으로 늘어나고 있으므로, 향후 @starting-style이 더 널리 사용될 가능성이 있음.

  	<div class="rotate-x-12 rotate-y-6">
  		3D Transform Example
	</div>

@starting-style {
  .fade-in {
    opacity: 0;
  }
}
.fade-in {
  transition: opacity 0.5s;
  opacity: 1;
}

3.4. 테일윈드 4.0의 not 변형 기능
- 테일윈드 4.0에서는 not 변형이 추가되어 특정 변형 선택자나 미디어 쿼리와 일치하지 않는 요소를 스타일링할 수 있게 되었음. 이 기능은 조건에 맞지 않는 요소들만 스타일링하고 싶을 때 유용하게 사용할 수 있는 기능.
- 과거에는 테일윈드에서 텍스트 변형을 지원하지 않았고, 이로 인해 별도의 CSS 클래스를 작성해야 했던 문제가 있었음.