TailwindCSS를 사용하여 링크에 대한 멋진 밑줄을 만드는 방법

글자의 색상을 변경하는 대신 링크에 밑줄을 긋는 것은 문서의 가독성을 크게 향상시킵니다. 그러나 밑줄 그 자체로는 선의 두께나 색상을 제어할 수 없습니다. 밑줄 모양을 제어하는 ​​방법에는 TailwindCSS의 boxShadow 속성을 사용하거나 배경 이미지를 조정하는 두 가지 방법이 있습니다.

박스 섀도우

Tailwind는 몇 가지 기본 그림자를 제공하지만 링크에 사용자 지정 그림자를 추가하려면 tailwind.config.js 파일을 편집하고 다음을 추가해야 합니다.

    theme: {
        extend: {
            boxShadow: {
                link: '0 -4px 0 0 rgba(178, 245, 234, .7) inset',
            },
    },
}

구문은 정확히 box-shadow이 사용하는 것입니다. 이제 링크에 밑줄을 긋고 싶다면 HTML에서 다음을 사용할 수 있습니다.

<a href="target.html" class="no-underline shadow-link">target</a>

style.css 파일에 다음을 추가하여 모든 링크에 전체적으로 적용할 수도 있습니다.

@tailwind base;

a {
    @apply no-underline shadow-link;
}

@tailwind components;

배경 이미지

배경 이미지를 밑줄로 사용하려면 약간 더 조정해야 하지만 훨씬 더 멋진 결과를 얻을 수 있습니다. @tailwind utilities 줄 뒤에 style.css를 추가할 수 있습니다.

@layer base {
    a {
        background-image: linear-gradient(to top, orange, yellow, transparent);
        background-position: 0 110%;
        background-repeat: no-repeat;
        background-size: auto .75rem;
    }
}

@layer base를 사용하여 모든 a 태그에 적용되는 전역 스타일을 만듭니다. 나머지는 주황색, 노란색, 투명, 아래에서 위로 가는 선형 그래디언트를 만드는 CSS 코드입니다. 결과는 아래 이미지와 같습니다.



멋진 밑줄을 보고 Tailwind로 밑줄을 만들고 싶다면 이제 어디서부터 시작해야 할지 아실 것입니다!