JIT(Just-in-Time) 모드로 Tailwind CSS 마스터하기

게시 됨: 2022-04-23

유틸리티 우선 프레임워크는 웹 페이지를 더 빠르게 디자인하는 데 도움이 되며 Tailwind CSS는 가장 인기 있는 프레임워크 중 하나가 되었습니다. 하지만 인기가 있다고 해서 완벽해지는 것은 아닙니다.

Tailwind CSS를 사용하는 데는 몇 가지 문제가 있었습니다. 예를 들어 개발 중에 방대한 스타일시트를 사용하고 자체적으로 추가 변형을 활성화해야 하는 등의 문제였습니다. 이러한 문제 중 일부에 대한 솔루션은 이 튜토리얼에서 일반적인 초점이 될 것입니다.

이 자습서에서는 JIT 컴파일러라고 하는 Just-In-Time 컴파일러로 알려진 Tailwind CSS 프레임워크의 매우 중요한 기능에 대해 설명합니다.

Tailwind CSS JIT 컴파일러 사용의 기능과 이점, 활성화 방법, 몇 가지 실용적인 예를 살펴보겠습니다.

시작하자.


Tailwind CSS JIT(Just-in-Time) 컴파일러란 무엇입니까?

Just-In-Time 컴파일러에 대해 이야기하기 전에 먼저 Tailwind CSS에 대해 이야기해야 합니다.

Tailwind CSS는 웹 페이지 디자인 속도를 높이고 사전 정의된 시스템을 사용하여 디자인 일관성을 유지하기 위해 마크업에 직접 적용할 수 있는 사전 정의된 CSS 클래스 세트가 있는 유틸리티 우선 CSS 프레임워크입니다.

JIT 컴파일러 릴리스 이전에는 설치 후 생성된 Tailwind CSS 파일 크기가 일반적으로 최대 3MB였습니다. 그러나 Tailwind를 계속 구성하고 사용자 지정하면 파일 크기가 계속 커지며 경우에 따라 최대 15MB의 스타일시트가 생성될 수 있습니다.

사용하지 않는 모든 스타일은 생산 중에 제거되지만 개발 중에는 그렇지 않습니다. 10MB 또는 20MB만큼 큰 스타일시트를 사용하면 문제가 발생하고 개발 도구가 지연될 수 있습니다.

JIT 컴파일러를 사용하면 프로젝트를 빌드할 때 스타일이 생성됩니다. 즉, Tailwind CSS와 함께 제공되는 모든 유틸리티 클래스가 아니라 현재 사용 중인 유틸리티 클래스만 스타일시트 크기에 포함됩니다.

Tailwind CSS JIT 모드 사용의 이점

이 섹션에서는 JIT 컴파일러 사용의 이점에 대해 설명합니다. 여기에는 다음이 포함됩니다.

  1. 스타일시트는 개발 및 프로덕션에서 동일합니다.
  2. 더 빠른 빌드 시간.
  3. 모든 변형은 기본적으로 활성화되어 있습니다.
  4. 개발 중 컴파일이 훨씬 빠릅니다.
  5. 사용된 스타일만 생성됩니다.
  6. 변형을 쌓을 수 있습니다.
  7. 개발 도구 성능이 향상되었습니다.

Tailwind CSS JIT 컴파일러 사용의 단점

JIT 컴파일러 GitHub 문서에 따라 현재 알려진 제한 사항은 다음과 같습니다.

  • 고급 PurgeCSS 옵션은 지원되지 않습니다.
  • “코어의 일부이거나 플러그인에 의해 생성되거나 @layer 규칙 내에서 정의된 클래스만 @apply 할 수 있습니다. @layer 규칙 내에서 정의되지 않은 임의의 CSS 클래스는 @apply 할 수 없습니다.”
  • PostCSS 8만 지원됩니다.

@apply 지시문은 사용자 정의 CSS에서 유틸리티 클래스를 적용하는 데 사용됩니다. 이것은 사용자 정의 CSS 스타일을 정의할 때 유용하지만 이미 정의된 유틸리티 클래스를 사용하는 것을 선호합니다. 다음은 @apply 지시문이 작동하는 방법의 예입니다.

 .my-custom-css { @apply text-green-500; }

위의 코드에서 사용자 정의 CSS 클래스에 녹색을 추가했습니다. 녹색은 Tailwind 유틸리티 클래스를 사용하여 적용되었습니다.

이 유용한 가이드에서 Just-In-Time 컴파일러로 알려진 Tailwind CSS 프레임워크의 매우 중요한 기능에 대해 알아보세요. 트윗하려면 클릭

Tailwind CSS JIT 모드를 활성화하는 방법

작성 당시 Tailwind CSS 버전 3은 이미 릴리스되었으며 Tailwind CSS를 설치할 때 기본적으로 활성화됩니다. JIT 컴파일러 활성화에 대한 아래 설명은 버전 3 이상에는 적용되지 않습니다. 이 튜토리얼에서 다루는 다른 모든 예제는 버전 3과 호환됩니다.

JIT 컴파일러를 활성화하는 것은 매우 쉽습니다. 'jit' 값을 가져야 하는 mode 속성을 추가하여 tailwind.config.js 파일을 업데이트하기만 하면 됩니다.

tailwind.config.js는 다음과 같아야 합니다.

 module.exports = { mode: 'jit', purge: ['./public/*.html'], darkMode: false, // or 'media' or 'class' theme: { extend: {}, }, variants: { extend: {}, }, plugins: [], }

집중할 줄은 다음을 추가한 부분입니다.

 모드: '짓'

이를 통해 JIT 컴파일러의 기능을 사용할 수 있습니다.

완료되면 빌드 명령을 실행하고 파일 크기가 감소하는 것을 볼 수 있습니다. 사용 중인 스타일만 표시됩니다.

파일 크기가 줄어들면 개발 및 생산 중 스타일시트가 동일해집니다. 개발자 도구가 지연될 가능성도 최소화되고 프로젝트를 빌드할 때 코드가 더 빠르게 컴파일됩니다.

다음으로 JIT 컴파일러의 몇 가지 실용적인 응용 프로그램을 살펴보겠습니다.

이를 통해 JIT 컴파일러의 기능을 사용할 수 있습니다.

완료되면 빌드 명령을 실행하고 파일 크기가 감소하는 것을 볼 수 있습니다. 사용 중인 스타일만 표시됩니다.

파일 크기가 줄어들면 개발 및 생산 중 스타일시트가 동일해집니다. 개발자 도구가 지연될 가능성도 최소화되고 프로젝트를 빌드할 때 코드가 더 빠르게 컴파일됩니다.

다음으로 JIT 컴파일러의 몇 가지 실용적인 응용 프로그램을 살펴보겠습니다.

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

이 섹션에서 JIT 컴파일러의 몇 가지 실용적인 예를 볼 것입니다. Tailwind의 디자인 시스템을 확장하는 데 도움이 되는 임의의 값으로 시작하겠습니다.

임의의 값

이미 생성된 디자인 시스템 외부의 값을 사용하려는 경우가 발생할 수 있습니다. 이 값은 색상, 패딩, 여백, 너비 등에 대한 것일 수 있습니다.

JIT 컴파일러를 사용하면 임의의 값을 사용하여 이를 달성할 수 있습니다. 이러한 임의의 값을 사용하면 디자인 시스템에서 벗어나 고유한 사용자 정의 값을 정의할 수 있습니다. 이러한 값은 [300px], [#FA8072] 구문에서 볼 수 있습니다.

이렇게 하려면 Tailwind가 디자인 시스템에서 새 값을 정의하고 있음을 알 수 있도록 대괄호 안에 값을 중첩해야 합니다. 다음은 아래의 예입니다.

 <div class="mt-[300px] w-[500px]"> </div>

위의 예에서 우리는 처음에 디자인 시스템에 존재하지 않았던 300px와 500px의 두 가지 새로운 값을 사용했습니다. JIT 컴파일러 이전에는 이와 동일한 효과를 얻기 위해 먼저 config.js 파일에서 이러한 값을 정의해야 할 것입니다.

다음 예는 새 색상 값을 다음과 같이 정의하는 방법을 보여줍니다.

 <p class="bg-[#FA8072] ">This paragraph has a salmon background </p>

여기에서는 연어 배경색으로 단락을 만들었습니다. bg-salmon이라는 Tailwind 유틸리티 클래스는 볼 수 없지만 임의의 값을 사용하여 이를 정의할 수 있습니다.

다운타임 및 WordPress 문제로 어려움을 겪고 계십니까? Kinsta는 시간을 절약하도록 설계된 호스팅 솔루션입니다! 우리의 기능을 확인하십시오

쌓을 수 있는 변형

JIT 컴파일러를 사용하면 모든 변형이 기본적으로 활성화되므로 config.js 파일을 사용하여 활성화하는 것을 잊어버릴 수 있습니다. 이 외에도 변형을 쌓아 멋진 결과를 얻을 수 있습니다.

각 변형은 콜론으로 구분됩니다.

다음은 예입니다.

 <button class="sm:dark:disabled:focus:hover:bg-blue-300">

위의 코드는 focus 속성이 비활성화된 버튼을 만들고 마우스를 가져가면 파란색으로 바뀝니다.

의사 요소

JIT 컴파일러를 사용하면 의사 요소의 스타일을 지정할 수 있습니다. 의사 요소는 요소의 첫 글자 스타일을 지정하거나 요소 앞/뒤에 내용을 삽입하는 것과 같이 요소의 특정 부분에 스타일을 지정하는 데 사용됩니다.

다음은 몇 가지 예입니다.

 <p class="first-letter:bg-green-600"> First letter will have a green color </p>

위의 예에서 첫 번째 문자 "M"은 녹색입니다.

 <p class="selection:bg-green-600"> Highlight this text to see a green color. </p>

위의 코드에서 텍스트를 강조 표시하면 배경색이 녹색이 ​​됩니다.

면별 테두리 색상

파일 크기 고려 사항으로 인해 이 기능은 처음에는 제외되었지만 JIT 컴파일러 릴리스와 함께 변경되었습니다. 각 테두리에 다른 색상을 지정할 수 있습니다.

이에 대한 예를 살펴보겠습니다.

 <div class="border-2 border-t-red-400 border-r-blue-400 border-b-yellow-400 border-l-green-400"> </div>

div에 여러 테두리 색상을 지정했습니다. 위쪽 테두리는 빨간색, 오른쪽 테두리는 파란색, 아래쪽 테두리는 노란색, 왼쪽 테두리는 녹색입니다.

Tailwind CSS 버전 3의 JIT 모드

Tailwind CSS 버전 3 이상부터 Tailwind CSS를 설치할 때 JIT 컴파일러가 기본적으로 활성화되므로 tailwind.config.js 파일의 변경 사항에 대해 걱정할 필요가 없습니다. 이를 통해 이동 중에 JIT 컴파일러의 모든 기능에 액세스할 수 있습니다. 우리가 해야 할 일은 현재 버전에 대한 설치 지침을 따르는 것뿐입니다.

JIT 컴파일러는 무엇이며 어떻게 사이트를 향상시킬 수 있습니까? 이 가이드에는 Click to Tweet 에 대한 답변이 있습니다.

요약

JIT 컴파일러는 Tailwind CSS 프레임워크를 완전히 새로운 수준으로 끌어 올렸습니다. 이 릴리스에는 프레임워크를 더 잘 사용할 수 있도록 유용한 새로운 기능이 포함되어 있습니다. 이동 중에 실제로 사용하는 스타일만 생성되기 때문에 더 이상 파일 크기가 너무 커서 개발 도구가 지연되는 것에 대해 걱정할 필요가 없습니다.

변형 스태킹, 유사 요소를 사용한 요소 스타일 지정, 임의의 값을 사용하여 디자인 시스템 확장 및 매우 많이 요구되는 기능(요소 테두리의 각 측면을 개별적으로 스타일 지정하는 기능)과 같은 새로운 기능의 몇 가지 예를 보았습니다. 우리는 여기서 Tailwind의 JIT 기능의 한계에 도달하지 않았으므로 다음 단계는 직접 테스트하고 자신의 작업에 JIT의 기능을 가장 잘 활용할 수 있는 방법을 탐색하는 것입니다.

JIT 컴파일러를 사용하여 어떤 멋진 기능을 구축했습니까? 아래 의견에 의견을 공유하십시오.