Tailwind CSS Link

Class Name	Type	Description
link	Component	Adds underline to a text.
link-hover	Style	Only show underline on hover.
link-animated	Style	Show underline on hover with animation.
link-neutral	Color	Applies’neutral’ color to link.
link-primary	Color	Applies’primary’ color to link.
link-secondary	Color	Applies’secondary’ color to link.
link-accent	Color	Applies’accent’ color to link.
link-success	Color	Applies’success’ color to link.
link-info	Color	Applies’info’ color to link.
link-warning	Color	Applies’warning’ color to link.
link-error	Color	Applies’error’ color to link.

Variants

Default

The link component class serves as the standard class for the basic anchor tag.

Underline on hover

Apply the link-hover modifier class to make links underlined when hovered over.

Animated underline

Apply the link-animated modifier class to make links underlined with animation on hovered over.

The modifier classes `link-animated` and `link-hover` are also applicable to semantic links.

Colors

Semantic links

Utilize the link-{semantic-color} modifier class to assign specific semantic colors to links.

<a href="#" class="link link-neutral">Neutral link</a>
<a href="#" class="link link-primary">Primary link</a>
<a href="#" class="link link-secondary">Secondary link</a>
<a href="#" class="link link-accent">Accent link</a>
<a href="#" class="link link-info">Info link</a>
<a href="#" class="link link-success">Success link</a>
<a href="#" class="link link-warning">Warning link</a>
<a href="#" class="link link-error">Error link</a>

Custom Color

Use the --link-color for the custom color of the link.

<a href="#" class="link [--link-color:purple]">Default</a>
<a href="#" class="link link-hover [--link-color:purple]">Underline on Hover</a>
<a href="#" class="link link-animated [--link-color:purple]">Animated Underline</a>

Illustrations

In paragraphs

Below is an example demonstrating how to use links within paragraph.

In cards

Below is an example demonstrating how to use links in card.

<div class="card max-w-sm">
  <div class="card-body">
    <h5 class="card-title mb-0">Card title</h5>
    <div class="text-base-content/50 mb-3">Card subtitle</div>
    <p class="mb-4">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <div class="card-actions">
      <a href="#" class="link link-primary link-hover">Card link</a>
      <a href="#" class="link link-primary link-animated">Another link</a>
    </div>
  </div>
</div>

In alerts

Below is an example demonstrating how to use links in alert.

FlyonUI