몇 달 전(작성 당시) Tailwind CSS는 Tailwind CSS v4.0에 대한 작업을 오픈소스로 공개했습니다. (여기 GitHub에서 찾을 수 있습니다.)

최근 Tailwind는 Tailwind CSS 4의 공개 베타를 발표했습니다. 이 글에서는 새 버전의 주요 내용을 다루겠습니다. 그럼 시작해 보겠습니다!

일반 구조 변경

Tailwind는 성능을 대폭 향상시키는 엔진 재작업을 거쳤습니다. 전체 빌드는 최대 5배 더 빠르고, 증분 빌드는 최대 100배(맞게 읽으셨습니다) 더 빠릅니다.

Tailwind v4에는 통합 툴체인도 있습니다. 모든 Tailwind 프로젝트에 autoprefixer와 postcss를 설치해야 했던 것을 기억하시나요? 더 이상 그럴 필요가 없습니다!

Tailwind는 구성에 대한 흥미로운 접근 방식을 취하여 JS 구성 파일에서 CSS 구성으로 이동하고 있습니다. 이는 CSS에서 직접 플러그인, 테마 및 기타 동작을 구성한다는 의미입니다.

Tailwind는 CSS의 최신 기능도 지원하고 있습니다.

CSS에 새로운 로고와 새로운 기능이 생겼습니다! ?

최고의 코드 ・ 11월 23일

#css #웹개발 #프로그램 작성 #논의하다

이제 일반적인 변경 사항은 끝났으니 Tailwind에서 구체적으로 무엇을 추가하는지 살펴보겠습니다.

새로운 기능?

Tailwind v4를 사용해 보려면 v4(베타) 시작 문서를 확인하세요.

프로젝트를 쉽게 업그레이드하려면 npx @tailwindcss/upgrade@next를 실행하면 Tailwind가 대신해 드립니다. 조심하세요! 획기적인 변화가 있을 수 있습니다.

그림 물감

Tailwind v4 색상 팔레트는 RGB 대신 oklch를 기반으로 합니다. RGB 색상 시스템은 화면 전체의 일관성과 생동감 측면에서 약간 제한적입니다. 이제 oklch 색상 시스템이 널리 지원되므로 Tailwind v4는 이를 활용할 예정입니다!

컨테이너 쿼리

Tailwind v4는 이제 기본적으로 컨테이너 쿼리를 지원합니다. 컨테이너 쿼리가 무엇인지 모르신다면 설명해드리겠습니다.

Md:, sm: 등 Tailwind에서 다양한 화면 크기에 적용되는 CSS를 맞춤설정할 수 있는 기능을 알고 계시나요?
이러한 경우 클래스는 창 크기를 참조합니다. 컨테이너 쿼리를 사용하면 컨테이너 크기를 대신 참조할 수 있습니다.

위의 예에서 그리드에는 3개의 열이 있습니다. 창이 작은 크기에 도달할 때가 아니라 컨테이너에 도달했을 때입니다. 상상할 수 있듯이 이는 반응형 레이아웃에서 매우 편리합니다.


  
  
  필드 크기 조정


필드 크기 조정은 아직 보편적으로 지원되는 CSS 기능은 아니지만 지원되면 정말 멋진 기능이 될 것입니다! 자동 크기 조정 텍스트 영역을 생성하기 위해 JS가 필요한 대신 CSS만 사용할 수 있습니다.

그리고 Tailwind v4가 이를 지원합니다!

Tailwind 웹사이트에서 데모를 사용해 보세요.

이제 텍스트 영역에 field-sizing-content 클래스를 추가하여 사용할 수 있습니다.

  
  
  하위 업데이트


Tailwind stable(모를 수도 있음)에는 클래스가 있는 요소의 직접 하위 항목을 타겟팅할 수 있는 * 변형이 있습니다. 예를 들어:







Tailwind v4의 새로운 ** 변형은 모든 하위 항목:
을 대상으로 합니다.







  
  
  삽입된 그림자(및 링)


이제 inset-shadow 및 inset-ring 클래스를 사용하여 요소에 삽입 그림자와 링을 쉽게 생성할 수 있습니다.












  
  
  더 많은 것이 있습니다!


새로 추가된 내용을 모두 보려면 https://tailwindcss.com/docs/v4-beta로 이동하여 확인하세요!

이 글은 #토론글 입니다! 그래서 짧게 썼습니다. 나는 당신의 생각을 알고 싶습니다!

Tailwind를 싫어하는 많은 분들이 제게 피드백을 주실 거라는 걸 알아요?

확실히 논란의 여지가 있는 새로운 기능이 있는데 의견을 듣고 싶습니다.

요약: 댓글을 남겨주세요!




읽어주셔서 감사합니다!

베스트코드