문제 상황

CSS의 속성 중 background-image를 통해 linear-gradient를 사용할 수 있다.
이는 이름 그대로 그라데이션 효과를 줄 수 있는데, Tailwind에서는 어떻게 사용하면 될까?

적용(ft. via)

<hr className="h-[2px] bg-black bg-gradient-to-l from-white via-black to-white mb-8" />

사용법 자체는 공식 문서에 나와 있다. 그런데...
원래는 % 단위를 활용해서 어느 부분까지는 이 색깔, 어느 부분까지는 저 색깔 이런 식으로 지정이 가능하다.
Tailwind에서 최대한 비슷하게 이 기능을 구현하려면 via 속성을 사용하면 된다.
from에서 시작해서 via까지 갔다가 to로 끝나는 순서이다.
필자는 white에서 시작해서 black으로 변했다가, 다시 white로 변하도록 만들었다.

의문

아직 % 단위로 사용했던 그 기능을 완벽하게 구현하는 건 찾지 못했다.
참고 자료에서도 못 본 것 같은데...조금 더 공부해봐야겠다.
아직 없는 기능일지도?

참고 문서

참고 자료 1
Tailwind 공식 문서