TailwindCSS .s가 종료되었습니다.

Tailwind CSS가 베타 단계를 마치고 v4.0 버전을 공식 출시합니다!

v4.0 버전은 2025년 1월 22일(미국 동부 표준시)에 정식 출시되었습니다. UTC/GMT -5시간.

성능 및 벤치마크 결과

Tailwind CSS v4.0의 주요 특징 중 하나는 새로운 고성능 엔진입니다. 완전한 아키텍처 재작성을 통해 개발 팀은 빌드 시간과 점진적인 재구축 속도가 크게 향상되었다고 보고했습니다.

构建类型	v3.4 (中位数)	v4.0 Beta (中位数)	性能提升倍数
**完整构建**	378ms	100ms	3.78倍
**增量重建 (新增 CSS)**	44ms	5ms	8.8倍
**增量重建 (无新增 CSS)**	35ms	192µs	182倍

표에서는 새로운 CSS 콘텐츠를 추가하지 않고도 증분 재구성의 응답 시간이 마이크로초에 도달하여 개발 효율성이 크게 향상될 수 있음을 보여줍니다.

주요 변경 사항

새로운 순수 CSS 우선 접근 방식 덕분에 더 이상 JS 사용자 정의의 복잡성을 자세히 알아볼 필요가 없습니다.

Tailwind CSS v4.0은 속도, 단순성, 기본 CSS 표준과의 긴밀한 일치를 강조하는 강력하고 미래 지향적인 아키텍처를 제공합니다. CSS 우선 구성, 기본 캐스케이딩 레이어, 확장된 3D 변환 유틸리티 및 최적화된 그래디언트 워크플로를 통해 Tailwind CSS는 계속해서 유틸리티 우선 디자인의 경계를 넓히고 있습니다.

CSS 우선순위 구성

Tailwind CSS v4.0의 획기적인 개선 사항은 CSS 우선순위 구성입니다. 전용 tailwind.config.js을 사용하는 대신 개발자는 @theme 규칙

을 사용하여 CSS에서 직접 디자인 토큰을 선언할 수 있습니다.

<code>@import "tailwindcss";

@theme {
  --font-display: "Satoshi", "sans-serif";
  --breakpoint-3xl: 1920px;
  --color-avocado-400: oklch(0.92 0.19 114.08);
  /* ... */
}</code>

자동 소스코드 감지

Tailwind CSS v4.0을 사용하면 content 배열을 수동으로 구성할 필요성이 줄어듭니다. 기본적으로 일반적인 경험적 방법을 기반으로 소스 파일을 검사하여 .gitignore 내의 경로나 미디어 파일을 자동으로 제외합니다. 필요한 경우 다음을 통해 특정 소스를 추가할 수 있습니다.

<code>@import "tailwindcss";
@source "../node_modules/@my-company/ui-lib";</code>

내장된 CSS 번역 및 가져오기

v4.0에서는 Lightning CSS 통합으로 공급업체 접두사 지정, 기능 번역 및 압축을 원활하게 처리합니다. 이전에는 개발자가 postcss-import 또는 autoprefixer에 의존했을 수 있지만 이제는 더 이상 필요하지 않습니다.

<code>@import "tailwindcss";</code>

--

참고링크

https://www.php.cn/link/2784c762da784d9adece645ff9e61637
https://www.php.cn/link/7aaca7ed25a9290e1953a69e401d924c
https://www.php.cn/link/b27152e13b5ed9b61478a1384d7b9bf2
https://www.php.cn/link/c07d101913fe4982e90874d6747e4e59

위 내용은 TailwindCSS .s가 종료되었습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!