GN⁺: Tailwind CSS v4.0 진행 상황을 오픈 소스로 공개

• 새로운 고성능 엔진인 Oxide가 Tailwind CSS v4.0으로 개발 중임.
• 개발자 경험을 단순화하고 웹 플랫폼의 최신 진화를 활용하기 위해 설계됨.
• 원래 v3.x 릴리스로 출시될 예정이었으나, 새로운 세대의 프레임워크로서 v4.0으로 출시하기로 결정됨.
• 아직 초기 단계이며 많은 작업이 남아 있지만, 첫 번째 공개 알파 버전을 태깅하여 실험을 시작할 수 있음.

새 엔진, 속도를 위해 구축됨

• 새 엔진은 처음부터 다시 작성되었으며, 더 적은 코드로 더 빠른 속도를 제공함.
• 최대 10배 빠른 빌드 속도를 제공하며, Tailwind CSS 웹사이트는 105ms, Catalyst UI 키트는 55ms만에 빌드 가능.
• 새 엔진은 설치 크기가 35% 이상 작아졌으며, Rust와 Lightning CSS와 같은 무거운 네이티브 패키지를 포함함.
• Rust를 사용하여 프레임워크의 가장 비용이 많이 드는 부분을 처리하고, TypeScript로 코어를 유지하여 확장성을 제공함.
• 새 엔진은 Lightning CSS에만 의존함.
• 자체 CSS 파서를 작성하고, PostCSS보다 2배 빠른 파싱 속도를 제공하는 데이터 구조를 설계함.

통합된 툴체인

• Tailwind CSS v4는 더 이상 플러그인이 아니며, CSS를 처리하는 올인원 도구임.
• @import 처리, 벤더 프리픽싱, 중첩 지원 등이 내장되어 있어 별도의 설정이 필요 없음.
• oklch() 색상과 미디어 쿼리 범위와 같은 현대적인 CSS 기능을 더 나은 브라우저 지원을 위한 구문으로 변환함.
• PostCSS 플러그인을 계속 제공하지만, 번들러 플러그인을 탐색 중이며, 첫 알파 릴리스와 함께 공식 Vite 플러그인을 제공함.

현대 웹을 위해 설계됨

• Tailwind CSS v4는 향후 몇 년 동안 최첨단으로 느껴질 프레임워크를 구축하고자 함.
• 실제 @layer 규칙을 사용하여 과거에 문제가 되었던 특정성 문제를 해결함.
• @property를 사용하여 내부 사용자 정의 속성을 명확하게 정의하고, 배경 그라데이션과 같은 효과를 가능하게 함.
• color-mix를 사용하여 색상 변수의 불투명도 수정이나 currentColor의 불투명도 조정을 더 쉽게 함.
• 코어에 컨테이너 쿼리를 직접 지원하며, 새로운 @min-* 및 @max-* 변형을 통해 컨테이너 쿼리 범위를 지원함.

조합 가능한 변형

• 새 아키텍처는 다른 선택자에 작용하는 변형을 함께 구성할 수 있게 함.
• 이전 버전에서는 group-has-*와 같은 변형이 프레임워크에 명시적으로 정의되었으나, 이제 group-*은 기존 has-* 변형과 함께 구성될 수 있음.

제로 구성 콘텐츠 감지

• 초기 알파 릴리스에서는 content 경로를 구성할 수 없으며, 대부분의 프로젝트에서는 이를 다시 설정할 필요가 없음.
• PostCSS 플러그인이나 CLI를 사용하는 경우, Tailwind는 프로젝트 전체를 크롤링하여 템플릿 파일을 찾음.
• Vite 플러그인을 사용하는 경우, 모듈 그래프에 의존하여 실제로 사용하는 파일을 정확히 알 수 있음.

CSS 우선 구성

• Tailwind CSS v4.0의 주요 목표는 프레임워크를 CSS 네이티브처럼 느끼게 하고, JavaScript 라이브러리처럼 느껴지지 않게 하는 것임.
• 설치 후, 일반 CSS @import 문을 사용하여 프로젝트에 추가함.
• JavaScript 구성 파일에서 모든 사용자 정의를 설정하는 대신, CSS 변수를 사용함.

변경된 사항

• 중요한 변경 사항을 가볍게 다루지 않지만, v4에서는 몇 가지 다르게 처리되는 사항이 있음.
• 더 이상 문서화되지 않은 유틸리티를 제거함.
• PostCSS 플러그인과 CLI는 별도의 패키지로 제공됨.
• 기본 테두리 색상을 제거함.
• 기본적으로 ring 유틸리티는 이제 currentColor를 사용하는 1px 링임.

v4.0으로 가는 로드맵

• 새 엔진은 처음부터 다시 작성되었으며, 새로운 구성 접근 방식을 사용하는 개발자 경험에 전적으로 집중함.
• 뒤로 호환성을 매우 중요하게 생각하며, 안정적인 v4.0 릴리스를 위한 주요 작업임.
• JavaScript 구성 파일 지원, 명시적 콘텐츠 경로 구성, 다른 다크 모드 지원, 플러그인 및 사용자 정의 유틸리티 지원, 클래스 접두사 구성, Safelists 및 blocklists 지원, important 구성 지원, theme() 함수 지원, 독립 실행형 CLI 지원 등이 포함됨.

알파 버전 시도하기

• 이미 몇 가지 알파 릴리스가 태깅되었으며, 프로젝트에서 오늘부터 실험을 시작할 수 있음.
• Tailwind CSS IntelliSense 확장 프로그램을 사용하는 경우, VS Code 확장 페이지에서 사전 릴리스 버전으로 전환해야 함.
• 문제가 발견되면 GitHub에서 알려주기를 바람.

Vite 사용하기

• Tailwind CSS v4 알파와 새로운 Vite 플러그인을 설치함.
• vite.config.ts 파일에 플러그인을 추가함.
• 메인 CSS 파일에서 Tailwind를 가져옴.

PostCSS 사용하기

• Tailwind CSS v4 알파와 별도의 PostCSS 플러그인 패키지를 설치함.
• postcss.config.js 파일에 플러그인을 추가함.
• 메인 CSS 파일에서 Tailwind를 가져옴.

CLI 사용하기

• Tailwind CSS v4 알파와 별도의 CLI 패키지를 설치함.
• 메인 CSS 파일에서 Tailwind를 가져옴.
• CLI 도구를 사용하여 CSS를 컴파일함.

GN⁺의 의견

• Tailwind CSS v4.0의 오픈 소스 공개는 개발자 커뮤니티에게 새로운 기능과 개선 사항을 미리 경험할 기회를 제공함. 이는 개발자들이 프레임워크에 대한 피드백을 제공하고, 더 안정적인 최종 릴리스에 기여할 수 있는 기회를 의미함.
• 새로운 엔진의 성능 향상은 빌드 시간을 크게 단축시키는 것으로 보여, 특히 대규모 프로젝트나 빠른 개발 사이클이 중요한 환경에서 유용할 것으로 예상됨.
• Rust와 TypeScript의 조합은 성능과 확장성을 동시에 추구하는 현대적인 접근 방식을 반영함. Rust로 작성된 부분은 성능을 극대화하는 반면, TypeScript는 개발자들이 쉽게 확장하고 유지보수할 수 있게 함.
• CSS 변수를 사용한 새로운 구성 방식은 기존의 JavaScript 기반 설정보다 더 CSS 친화적이며, 디자인 시스템과의 통합을 용이하게 할 수 있음.
• 이러한 변화는 기존 사용자들에게는 일부 마이그레이션 작업을 요구할 수 있으나, 장기적으로는 더 간결하고 유지보수가 쉬운 코드베이스로 이어질 것으로 기대됨.

[composite]

한국이 유난히 유틸리티형 CSS 도구에 대한 반감이 많더군요.

[neo]

Hacker News 의견

• Tailwind CSS는 프론트엔드에 있어 두 번째로 좋은 일이며, Vue 3만이 그것을 능가함.

  • CSS 클래스명을 짓는 데 드는 수고가 없고, 중복된 CSS 코드나 충돌하는 클래스 문제가 없음.
  • 모든 코드가 한 파일 안에 있어서 컴포넌트를 코드만 보고도 시각화할 수 있음.
  • SCSS로 돌아가지 않을 것이며, Vue 3, TailwindCSS, Vite 조합이 최고라고 생각함.

• Tailwind에 대한 강력한 비판자로서, CSS-first 설정 아래의 모든 발표가 매우 환영받을 만함.

  • Tailwind의 디자인 토큰, 리셋 등을 활용할 수 있고, 실제 CSS를 통해 커스터마이징 가능.
  • CSS의 모던 아키텍처, 캐스케이드, 심지어 웹 컴포넌트의 쉐도우 DOM까지 버리지 않고 Tailwind를 '가볍게' 사용할 수 있는 새로운 방법 제시.

• CTRL+u는 문법의 좋은 예를 보여줌.

  • 예를 들어, 둥근 모서리의 박스와 상단 및 하단 섹션을 만드는 데 직관적인 한 줄 코드가 필요함.

• 독립 실행형 CLI에 대해 아직 작업하지 않았지만, v4.0 릴리스 전에 반드시 완성할 것임.

  • 릴리스 발표의 나머지 부분을 고려할 때, 이는 Rust로 구축될 것이라고 가정함.
  • Node를 내장하지 않는 것을 선호함, 특히 Vercel의 이제는 버려진 pkg 도구에 의존하는 경우.

• 많은 유망한 개선 사항들이 있음.

  • JS를 통해 확장하는 대신 CSS를 통해 테마를 제어할 수 있는 기능에 가장 흥분됨.

• Tailwind가 unocss처럼 attributify를 지원하기를 바람.

  • 복잡한 레이아웃에 대해 훨씬 더 읽기 쉬움.

• 프론트엔드 개발자는 아니지만 몇 개의 웹사이트를 유지하고 있으며, 모두 Tailwind를 사용함.

  • Tailwind 유지 관리자들이 우선 순위를 정하는 데 있어 매우 좋은 직관을 가지고 있으며, 훌륭한 디자인 감각을 가짐.
  • Tailwind는 사용해보기 전까지는 이해되지 않지만, 각 버전마다 더욱 정제된 제품을 제공함.
  • 이 버전에서는 호환성 측면에서 크게 변한 것은 없지만, 버전 4가 공식화되면 더 많은 변경 사항이 있을 수 있음.
  • 새로운 엔진의 전망은 매우 멋지며, 빌드 속도 향상은 항상 환영받음.

• Tailwind에 대한 좋은 튜토리얼/가이드가 있는지 궁금함.

• htmx나 다른 hateoas 접근 방식과 함께 tailwindcss를 사용하는 사람이 있는지 궁금함.

  • hypertext가 스타일링과 관련이 없어야 하지만, tailwind와 같은 것은 이와 상충할 수 있음.
  • CSS와 hateoas는 마크업과 스타일링이 분리되어 있어 완벽하게 어울리지만, tailwindcss와 같은 경우에는 어떻게 하는지 궁금함.

• 데모 프로젝트에서 사용하고 싶었지만, import from "node:@tailwindcss/postcss@latest"가 package.json의 exports 필드에 대한 오류를 발생시킴.

  • 그럼에도 불구하고, 블로그 포스트에서는 postcss-import를 사용할 필요가 없다고 언급하지만, 여전히 그것을 의존성으로 포함하고 있음.