팀 에서 직접 제공하는 모든 최신 Tailwind CSS 뉴스는 https://tailwindcss.com/blog에서 확인을 할 수 있다.

v4 버전의 변화

https://tailwindcss.com/blog/tailwindcss-v4 에 따르면 Tailwind CSS v4.0은 성능과 유연성에 최적화된 완전히 새로운 버전의 프레임워크로, 재창조된 구성 및 사용자 지정 환경을 제공하고 웹 플랫폼이 제공해야 하는 최신 개선 사항을 최대한 활용한다고 합니다.

  1. 새로운 고성능 엔진 — full 빌드는 최대 5배 더 빠르고, incremental 빌드는 100배 이상 빠르며, 마이크로초 단위로 측정됩니다.

  2. 최신 웹을 위해 설계됨 —cascade layers, @property에 등록된 사용자 정의 속성 및 color-mix()와 같은 최첨단 CSS 기능을 기반으로 합니다.

  3. 간소화된 설치 — 종속성이 적고, 구성이 필요 없으며, CSS 파일에 단 한 줄의 코드만 있습니다.

  4. 자사 Vite 플러그인 — 최대 성능과 최소 구성을 위한 긴밀한 통합.

  5. Automatic content detection(자동 콘텐츠 감지) — 모든 템플릿 파일이 구성 없이 자동으로 검색됩니다.

  6. 내장 가져오기 지원 — 여러 CSS 파일을 번들로 묶는 데 추가 도구가 필요하지 않습니다.

  7. CSS 우선 구성 — JavaScript 구성 파일 대신 CSS에서 직접 프레임워크를 사용자 정의하고 확장할 수 있는 재구상된 개발자 경험입니다.

  8. CSS 테마 변수 — 모든 디자인 토큰은 기본 CSS 변수로 노출되므로 어디서나 액세스할 수 있습니다.

  9. 동적 유틸리티 값 및 변형 — 간격 스케일에 어떤 값이 있는지 추측하거나 기본 데이터 속성과 같은 항목에 대한 구성을 확장하지 마십시오.

  10. 현대화된 P3 색상 팔레트 — 최신 디스플레이 기술을 최대한 활용한 새롭게 디자인된 더 생생한 색상 팔레트입니다.

  11. 컨테이너 쿼리 — 컨테이너 크기에 따라 요소의 스타일을 지정하기 위한 일류 API, 플러그인이 필요하지 않습니다.

  12. 새로운 3D 변형 유틸리티 — 3D 공간의 요소를 HTML에서 직접 변형할 수 있습니다.

  13. 확장된 그래디언트 API — 방사형 및 원뿔 그래디언트, 보간 모드 등.

  14. @starting 스타일 지원 — JavaScript 없이 진입 및 종료 전환을 만드는 데 사용할 수 있는 새로운 변형입니다.

  15. not-* variant — 다른 변형, 사용자 정의 선택기 또는 미디어 또는 기능 쿼리와 일치하지 않는 경우에만 요소의 스타일을 지정합니다.

  16. 더 많은 새로운 유틸리티 및 변형 — 색 구성표필드 크기 조정, 복잡한 그림자, 불활성 등에 대한 지원을 포함합니다.