JIT를 사용하여 Tailwind CSS에서 사용자 정의 그레이디언트를 만드는 방법

JIT 란 무엇입니까?

v3 이후 JIT는 Tailwind CSS의 기본값이었으며 프레임워크에 많은 권한을 부여했습니다. 가장 좋은 추가 기능 중 하나는 arbitrary values 이며 이를 통해 사용자 정의 CSS를 클래스와 같은 Tailwind CSS로 대체할 수 있습니다.

Tailwind CSS JIT 없음

<div class="absolute p-4 floating-alert">Hello World! 👋</div>

그리고 CSS의 경우…

.floating-alert {
  bottom: 5px;
  right: 5px;
}

Tailwind CSS JIT 사용

<div class="absolute p-4 bottom-[5px] right-[5px]">Hello World! 👋</div>

여기에서 이점은 모든 것을 HTML 내에 유지한다는 것입니다. 이는 다음을 의미합니다.

파일 간 전환 감소

Tailwind CSS 구성을 업데이트할 필요가 없음

Tailwind CSS 중단점을 쉽게 사용top-[2px] sm:top-[3px] lg:top-[5px]

Tailwind CSS JIT로 그라디언트 만들기

이러한 그라디언트를 두 번 이상 사용하는 경우 Tailwind CSS 구성에 추가하는 것이 좋습니다.

그래디언트를 만드는 구문이 복잡해 보이지만 공백이 밑줄로 대체된다는 것을 알고 나면 이해하기 쉽습니다. 다음 예를 들어 보십시오.

<div class="bg-[linear-gradient(180deg,_#005BBB_49.9%,_#FFD500_50%)]"></div>

CSS에서는 다음과 같습니다.

background-image: linear-gradient(180deg, #005bbb 49.9%, #ffd500 50%);

쉼표 뒤의 밑줄은 개인적인 선택입니다. 가독성을 위해 그대로 두지만 제거할 수 있습니다.

다음은 Tailwind CSS 플레이 샌드박스에서 생성된 preview of the example입니다.

조금 더 어려운 것을 시도해 봅시다.

JIT를 사용한 Tailwind CSS의 원추형 기울기

이를 위해 예를 들어 conic-gradient를 찾기 위해 Hypercolor을 사용했습니다.



예제를 복제하기 위해 작성된 코드는 다음과 같습니다.

<div
  class="bg-[conic-gradient(at_left_center,_#eab308,_#a855f7,_#3b82f6)]"
></div>

다음 CSS가 생성됩니다.

background-image: conic-gradient(at left center, #eab308, #a855f7, #3b82f6);

JIT를 사용한 Tailwind CSS의 방사형 그래디언트

다시 한 번 예를 들어 radial-gradient를 찾기 위해 Hypercolor을 사용하고 있습니다.



예제를 복제하기 위해 작성된 코드는 다음과 같습니다.

<div
  class="bg-[radial-gradient(at_center_bottom,_#fde68a,_#7c3aed,_#0c4a6e)]"
></div>

다음 CSS가 생성됩니다.

background-image: radial-gradient(at center bottom, #fde68a, #7c3aed, #0c4a6e);

Tailwind CSS에 존재하지 않는 스타일도 JIT를 사용하여 Tailwind CSS에 사용자 지정 그래디언트를 추가하는 데 필요한 전부입니다. 다음을 포함한 더 많은 그라디언트를 확인하려면 Hypercolor을 확인하십시오. 메쉬 그래디언트, 거친 그래디언트 및 그래디언트 생성기.