Just-In-Time: 차세대 Tailwind CSS

업데이트: Tailwind CSS v2.1부터 새로운 Just-In-Time 엔진이 Tailwind CSS 자체에 포함되었으므로 더 이상 @tailwindcss/jit 패키지가 필요하지 않습니다. 문서에서 자세히 알아보세요.

Tailwind CSS를 개선해 오면서 가장 어려웠던 제약 중 하나는 개발 환경에서 생성되는 파일 크기였습니다. 설정 파일을 충분히 커스터마이징하면 생성된 CSS가 10MB 이상에 이를 수 있으며, 빌드 도구와 브라우저가 원활하게 처리할 수 있는 CSS 양에는 한계가 있습니다.

이런 이유로, 설정 파일에 너무 많은 추가 중단점을 추가하거나 disabled나 focus-visible과 같은 추가 변형을 활성화하는 것과 같은 비용이 큰 변경 사항에 항상 주의를 기울여야 했습니다.

오늘은 이러한 고민을 과거의 일로 만들어 줄 새로운 프로젝트를 소개합니다: Tailwind CSS를 위한 Just-In-Time 컴파일러.

@tailwindcss/jit는 템플릿 파일을 작성할 때 모든 CSS를 필요할 때마다 컴파일하는 새로운 실험적 라이브러리입니다. 이전처럼 전체 스타일시트를 미리 생성하지 않습니다.

이로 인해 여러 가지 장점이 있습니다:

빠른 빌드 시간. Tailwind는 CLI를 사용할 때 초기 컴파일에 3~~8초가 걸리며, webpack 프로젝트에서는 대형 CSS 파일을 처리하는 데 어려움을 겪어 30~~45초 이상이 소요됩니다. 이 라이브러리는 어떤 빌드 도구를 사용하든 가장 큰 프로젝트도 약 800ms 내에 컴파일할 수 있습니다 (증분 재빌드는 3ms까지 빠릅니다).
모든 변형이 기본적으로 활성화됨. 파일 크기 문제로 인해 focus-visible, active, disabled 등의 변형은 기본적으로 활성화되지 않습니다. 이 라이브러리는 필요할 때 스타일을 생성하므로 원하는 변형을 언제든지 사용할 수 있습니다. sm:hover:active:disabled:opacity-75와 같이 변형을 겹쳐 사용할 수도 있습니다. 더 이상 변형을 설정할 필요가 없습니다.
커스텀 CSS를 작성하지 않고도 임의의 스타일 생성. 디자인 시스템에 포함되지 않은 특정 값을 사용해야 할 때가 있나요? 예를 들어, 특이한 배경 이미지를 위해 top: -113px와 같은 값이 필요할 수 있습니다. 이 라이브러리는 필요할 때 스타일을 생성하므로 top-[-113px]와 같은 대괄호 표기법을 사용하여 유틸리티를 생성할 수 있습니다. md:top-[-113px]와 같이 변형과 함께 사용할 수도 있습니다.
개발과 프로덕션 환경에서 동일한 CSS. 스타일이 필요할 때 생성되므로 프로덕션 환경에서 사용되지 않는 스타일을 제거할 필요가 없습니다. 모든 환경에서 동일한 CSS를 볼 수 있습니다. 프로덕션 환경에서 중요한 스타일이 실수로 제거되는 것을 걱정할 필요가 없습니다.
개발 환경에서 더 나은 브라우저 성능. 개발 빌드가 프로덕션 빌드만큼 작기 때문에 브라우저가 수 메가바이트의 미리 생성된 CSS를 파싱하고 관리할 필요가 없습니다. 설정이 많이 확장된 프로젝트에서는 개발 도구가 훨씬 더 반응적입니다.

오늘 바로 @tailwindcss/jit를 설치하고 PostCSS 설정에 적용해 보세요:

npm install -D @tailwindcss/jit tailwindcss postcss autoprefixer

// postcss.config.js
module.exports = {
  plugins: {
    '@tailwindcss/jit': {},
    autoprefixer: {},
  },
}

현재는 별도의 라이브러리로 제공되지만, 모든 문제를 해결한 후에는 설정 옵션 뒤에 tailwindcss에 통합할 예정입니다. 올해 말에 출시될 Tailwind CSS v3.0에서는 기본값으로 설정할 계획입니다.

GitHub에서 프로젝트에 대해 자세히 알아보고, 설치하고, 사용해 보고, 테스트하고, 의견을 알려주세요!

시도해 볼 준비가 되셨나요? 시작하기 →