JIT를 사용하여 Tailwind CSS에서 사용자 정의 그레이디언트를 만드는 방법
5398 단어 tailwindcss
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 내에 유지한다는 것입니다. 이는 다음을 의미합니다.
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을 확인하십시오. 메쉬 그래디언트, 거친 그래디언트 및 그래디언트 생성기.
Reference
이 문제에 관하여(JIT를 사용하여 Tailwind CSS에서 사용자 정의 그레이디언트를 만드는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/markmead/how-to-create-custom-gradients-in-tailwind-css-with-jit-14k3텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)