TailWindCSSとのリンクのためにクールな下線を作る方法

文字の色を変える代わりに、リンクの下線を作ることは、文書の読みやすさを大いに向上させます.しかし、アンダーライニング自体はラインの厚さや色を制御することはできません.アンダーライニングの方法を制御するには2つの方法がありますboxShadow TarwindCSSのプロパティ、または背景画像のチューニング.

ボックスシャドウ

Truwindはいくつかの基本的な影を提供しますが、カスタムシャドウをリンクに追加したい場合は、Tailwindを編集しなければなりません.設定.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>

また、スタイルに以下を加えることによって、すべてのリンクにそれをグローバルに適用することができます.CSSファイル:

@tailwind base;

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

@tailwind components;

背景画像

下線として背景画像を使用してわずかにチューニングが必要ですが、はるかに見事な結果を可能にします.我々はスタイルに追加することができます.後のCSS@tailwind utilities 行

@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で彼らをつくってみたいならば、あなたは今どこで出発するべきかについてわかっています!