[CSS] 텍스트 그라디언트 text gradient 사용하는 법. TailwindCSS

TailwinCSS를 사용하면서, 텍스트에 gradient를 사용해야 할 필요가 생겼습니다. 요소의 배경에 gradient를 넣어 본 적은 있어도, 텍스트에 적용한 적이 없다는 것을 알고 기록하고자 포스팅 해봅니다!

❓CSS에서 Text Gradient를 사용하는 방법?

검색해본 결과, CSS에서 텍스트에 gradient를 적용시키기 위해선, webkit에서 제공하는 도구를 사용하면 된다는 것을 알았습니다.

See the Pen Untitled by Jeongwoo Park (@lurgi) on CodePen.

background-clip - CSS: Cascading Style Sheets | MDN

❓TailwindCSS에서 적용하는 법?

CSS에서 사용한 방법을 TailwindCSS에서 그대로 적용하면 됩니다.

아래는 React 환경에서의 예시입니다.

function Home () {
	//...
	return (
        <div className="bg-gradient-to-r from-blue-400 to-red-400 text-transparent bg-clip-text">
            Test Text
        </div>
    )
}