▲

GN⁺: Tailwind CSS v4.0 출시

 (tailwindcss.com)
1P by neo 1달전 | ★ favorite | 댓글 1개

  • Tailwind CSS v4.0 출시

    • 성능과 유연성을 최적화한 새로운 버전으로, 최신 웹 플랫폼의 발전을 최대한 활용함
    • 새로운 고성능 엔진으로 전체 빌드 속도가 최대 5배, 증분 빌드 속도가 100배 이상 빨라짐
    • 최신 CSS 기능을 활용하여 현대 웹에 맞게 설계됨

  • 새로운 고성능 엔진

    • Tailwind CSS v4.0은 프레임워크의 전면적인 재작성으로, 아키텍처를 최적화하여 속도를 극대화함
    • 증분 빌드가 100배 이상 빨라져 마이크로초 단위로 완료됨

  • 현대 웹을 위한 설계

    • 네이티브 캐스케이드 레이어, 등록된 사용자 정의 속성, color-mix() 등 최신 CSS 기능을 활용함
    • 논리적 속성을 사용하여 RTL 지원을 간소화하고 생성된 CSS 크기를 줄임

  • 간소화된 설치

    • 설치 과정이 간소화되어 의존성이 줄어들고, CSS 파일에 한 줄의 코드만 추가하면 됨
    • 외부 플러그인 없이도 @import 규칙을 기본 제공함

  • Vite 플러그인

    • Vite 사용자는 @tailwindcss/vite를 사용하여 Tailwind를 통합할 수 있음
    • Vite 플러그인을 사용하면 성능이 더욱 향상됨

  • 자동 콘텐츠 감지

    • 템플릿 파일을 자동으로 감지하여 구성 필요 없음
    • .gitignore 파일에 있는 항목을 자동으로 무시하여 불필요한 스캔을 방지함

  • 내장된 import 지원

    • @import를 사용하여 다른 CSS 파일을 인라인으로 가져올 수 있음
    • Tailwind CSS에 최적화된 import 시스템으로 성능을 더욱 향상시킴

  • CSS 우선 구성

    • JavaScript 대신 CSS에서 프로젝트를 구성할 수 있음
    • tailwind.config.js 파일 없이 CSS 파일에서 직접 사용자 정의 가능

  • CSS 테마 변수

    • 디자인 토큰을 CSS 변수로 제공하여 런타임에 쉽게 참조 가능함

  • 동적 유틸리티 값 및 변형

    • 다양한 유틸리티와 변형이 임의의 값을 수용할 수 있도록 간소화됨
    • 그리드 크기나 사용자 정의 데이터 속성을 쉽게 설정 가능함

  • 현대화된 P3 색상 팔레트

    • 기본 색상 팔레트를 rgb에서 oklch로 업그레이드하여 더 생생한 색상 제공

  • 컨테이너 쿼리

    • 컨테이너 크기에 따라 요소를 스타일링할 수 있는 API를 기본 제공함

  • 새로운 3D 변환 유틸리티

    • 3D 공간에서 요소를 변환할 수 있는 API 추가

  • 확장된 그라디언트 API

    • 선형, 원뿔형, 방사형 그라디언트를 생성할 수 있는 유틸리티 추가

  • @starting-style 지원

    • JavaScript 없이 요소가 처음 표시될 때 속성을 전환할 수 있는 기능 추가

  • not- 변형*

    • CSS :not() 가상 클래스 지원 추가

  • 추가된 새로운 유틸리티 및 변형

    • inset-shadow-*, field-sizing, color-scheme 등 다양한 새로운 유틸리티와 변형 추가

Tailwind CSS v4.0은 성능과 유연성을 극대화한 최신 버전으로, 다양한 새로운 기능과 개선 사항을 제공함.

▲
neo 1달전  [-]
Hacker News 의견

  • Tailwind v4의 발전에 대해 긍정적으로 평가하며, CSS 변수와 CSS-only 설정을 지원하는 점이 큰 장점임. Tailwind가 이제는 유틸리티로서의 역할을 잘 수행하고 있다고 봄

  • CSS는 과거보다 사용자 친화적으로 변했으며, 스타일 속성을 직접 HTML에 사용하는 것이 더 간단할 수 있음. 그러나 일부는 여전히 스타일 속성을 피하고자 함

  • Tailwind를 사용하여 스타일을 한 곳에서 읽을 수 있는 점이 좋음. 긴 클래스명은 있지만, 스타일을 쉽게 수정할 수 있어 유용함

  • Tailwind를 처음 접했을 때는 CSS를 다시 배워야 한다는 점이 부담스러웠음. 그러나 팀 작업과 확장성 측면에서 유용하다는 점을 이해함. 여전히 기본 스타일 시트를 선호함

  • Tailwind를 사용한 프로젝트에서 직관적이고 문서화가 잘 되어 있어 좋았음. 스타일 이름을 고민할 필요가 없어 시간 절약에 도움을 줌

  • Tailwind의 최신 업데이트로 빌드 시간이 줄어들고, JS 설정이 필요 없어졌음. CSS가 이제 대부분의 작업을 수행할 수 있게 되었음

  • Tailwind를 사용해보려 했으나, Bootstrap보다 결과물이 좋지 않음. 디자이너가 되지 않고도 괜찮은 결과물을 얻는 방법을 고민 중임

  • Tailwind의 깔끔하지만 일반적인 디자인이 널리 퍼져 있음. Tailwind의 인라인 스타일의 장점과 한계를 보여줌

  • Tailwind v4로의 업데이트가 기존 앱에 영향을 미쳤음. 호환성 문제로 인해 v3를 계속 사용하거나 빌드 스크립트를 수정해야 하는 상황임

답변달기