Tailwind CSS로 그라데이션 텍스트를 수행하는 방법

이 게시물은 원래 Red Pixel Themes에 게시되었습니다.


Tailwind CSS v3에서는 그래디언트 텍스트가 훨씬 쉬워졌습니다. 방법은 다음과 같습니다.

1단계: 그라디언트 스타일 추가

<h1 class="bg-gradient-to-r from-blue-600 via-green-500 to-indigo-400">
    hello world
</h1>

다음은 Tailwind에서 그라디언트로 작업하지만 세분화하는 방법에 대한 the official docs입니다.

bg-gradient-to-r 그라디언트를 만들고 왼쪽에서 오른쪽으로 만듭니다.

from-blue-600은 시작 색상을 설정하며 왼쪽으로 이동합니다.

via-green-500은 선택 사항인 중간 색상을 설정합니다.

to-indigo-400은 끝 색상을 설정합니다. 이 색상은 오른쪽으로 이동하며 끝을 투명하게 하려면 선택 사항일 수 있습니다.

사용 사례에 맞게 이 값을 변경할 수 있지만 이는 Tailwind CSS에서 그래디언트 작업을 위한 가장 일반적인 구조입니다.

선택 사항이지만 권장됨

이 시점에서 코드에 문제가 있음을 발견했을 수 있습니다. 텍스트가 충분히 짧고 창 크기를 더 낮은 너비로 조정하면 텍스트가 그라데이션 색상 위로 이동합니다.



이렇게 하면 그라디언트 텍스트 코드가 완료되었을 때 문제가 발생합니다. 창 크기를 조정하면 텍스트의 그라데이션 색상이 변경됩니다.

이는 우리가 만든 그래디언트가 텍스트 너비 대신 요소의 전체 너비를 차지하기 때문입니다.



이 문제를 해결하려면 요소에 inline-block 클래스를 추가하기만 하면 됩니다.

<h1 class="... inline-block">
    hello world
</h1>

이제 그래디언트는 상위 요소의 너비 대신 텍스트의 너비만 차지합니다.



문제 해결됨! 이제 다음 단계로 넘어 갑시다.

2단계: 텍스트를 투명하게 만들기

text-transparent 클래스를 사용하여 텍스트를 투명하게 만듭니다.

<h1 class="... text-transparent">
    hello world
</h1>

텍스트가 사라지지만 걱정하지 마세요. 다음 단계에서 수정하겠습니다.

3단계: 텍스트를 배경으로 자르기

이것은 그라디언트 텍스트를 만드는 데 가장 중요한 것입니다. 여러 값이 있는 background-clip CSS 속성을 사용하고 그 중 하나는 text 입니다. Tailwind CSS에서 특정 속성과 값을 사용하려면 bg-clip-text 클래스를 추가하기만 하면 됩니다.

<h1 class="... bg-clip-text">
    hello world
</h1>

그게 다야! 이제 그라디언트 텍스트가 생겼습니다 🥳

모두 합치면 다음 스니펫을 얻을 수 있습니다.

<h1 class="bg-gradient-to-r from-blue-600 via-green-500 to-indigo-400 inline-block text-transparent bg-clip-text">hello world</h1>

가지고 놀고 싶다면 여기 Tailwind Play link이 있습니다.


이게 다야! Tailwind CSS로 그라데이션 텍스트를 만드는 방법과 텍스트의 너비가 그라데이션 색상을 변경하는 방법과 수정 방법을 고려하는 방법을 배웠기를 바랍니다.