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

> Clean Markdown view of GeekNews topic #13708. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=13708](https://news.hada.io/topic?id=13708)
- GeekNews Markdown: [https://news.hada.io/topic/13708.md](https://news.hada.io/topic/13708.md)
- Type: GN+
- Author: [xguru](https://news.hada.io/@xguru)
- Published: 2024-03-08T11:05:23+09:00
- Updated: 2024-03-08T11:05:23+09:00
- Original source: [tailwindcss.com](https://tailwindcss.com/blog/tailwindcss-v4-alpha)
- Points: 7
- Comments: 2

## Topic Body

- 새로운 고성능 엔진인 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 친화적이며, 디자인 시스템과의 통합을 용이하게 할 수 있음.  
- 이러한 변화는 기존 사용자들에게는 일부 마이그레이션 작업을 요구할 수 있으나, 장기적으로는 더 간결하고 유지보수가 쉬운 코드베이스로 이어질 것으로 기대됨.

## Comments



### Comment 23592

- Author: [hidden]
- Created: 2024-03-09T15:00:17+09:00
- Points: 1

[숨김 처리된 댓글입니다]

### Comment 23573

- Author: neo
- Created: 2024-03-08T11:05:23+09:00
- Points: 1

###### [Hacker News 의견](https://news.ycombinator.com/item?id=39617953) 
- 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`를 사용할 필요가 없다고 언급하지만, 여전히 그것을 의존성으로 포함하고 있음.