Tailwind JIT 컴파일러를 사용하는 방법

최근에 JIT 컴파일러가 포함된 Tailwind v2.1이 출시되었습니다. JIT(Just In Time) 컴파일러는 subpixel-antialiased , place-self-start 및 backdrop-brightness-95 와 같이 (거의) 사용하지 않는 모든 종류의 클래스 대신 실제로 사용하는 CSS만 생성합니다. CSS를 더 잘 컴파일하면 약 100ms로 매우 빠릅니다.

Tailwind CSS가 무엇인지 또는 어떻게 사용하는지 모르는 경우read my post 이에 대해 알아보세요.

문제

Tailwind CSS의 주요 문제는 큰 개발 파일 크기였습니다. 이 파일에는 많은 클래스가 포함되어 있으며 대부분은 사용하지 않을 것입니다. 이 때문에 모든 간격 변형(예: mt-35 )이 포함되지는 않습니다. 또한 group-focus 및 disabled와 같은 특수 변형을 사용하려는 경우 기본적으로 포함되지 않습니다.

프로덕션에 들어갈 때 사용하지 않는 모든 CSS 클래스를 제거하려면 npm run prod 를 실행해야 했습니다. 즉, 배포 프로세스에 더 많은 시간이 걸리므로 사용자가 웹 사이트를 사용하려면 더 오래 기다려야 합니다.

해결책

Tailwind CSS 뒤에 있는 팀은 이 문제를 해결하기 위해 JIT 컴파일러를 만들었습니다. 파일 중 하나를 변경하면 실제로 사용하는 클래스만으로 CSS가 다시 컴파일됩니다.

CSS 컴파일이 훨씬 빨라졌습니다. 예전에는 몇 초가 걸렸지만 지금은 the official announcement 3ms에도 100ms 밖에 걸리지 않습니다.

사용 방법

JIT 컴파일러를 사용하려면 다음 단계를 따르십시오.

먼저 Tailwind v2.1을 설치합니다.

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

다음으로 tailwind.config.js 파일에 다음을 추가합니다.

// tailwind.config.js

module.exports = {
    mode: 'jit',
    purge: [
        './resources/**/*.blade.php'
    ],
    //
}

마지막으로 npm run watch 를 실행하고 계속 실행하십시오.

이익

JIT 컴파일러를 사용하면 더 많은 이점이 있습니다.

CSS 컴파일은 빠릅니다. CSS를 컴파일하는 데 몇 초가 걸렸지만 이제는 몇 밀리초 내에 완료됩니다.

모든 변형이 활성화됩니다. 구성 파일에 아무 것도 구성하지 않고 focus-group , active 및 disabled와 같은 변형을 사용할 수 있습니다.

브라우저 성능이 더 좋습니다. CSS 파일이 매우 크면 브라우저가 느려집니다. JIT 컴파일러를 사용하면 사용된 CSS만 생성되기 때문에 HTML/CSS 검사가 더 빠릅니다.

제거에 대해 걱정할 필요가 없습니다. 프로덕션을 위해 제거할 때 일부 클래스가 제거되지 않고 디자인이 중단되는 경우가 있습니다. JIT 컴파일러를 사용하면 개발할 때 퍼징을 하기 때문에 같은 파일을 가지게 됩니다.