Update v4.2 - New components, 10+ framework guides, and quality improvements. Visit Changelog

Tailwind CSS Links

Style links with Tailwind CSS utilities for colors, opacity, underline effects, and icon treatments.

Use opacity utilities to make links appear more subtle or more prominent.

You can also change link opacity on hover for a stronger interactive state.

Underline color

Use decoration color utilities to customize the underline color independently from the link text.

Underline offset

Change the underline’s distance from your text.

Hover variants

Combine hover and focus underline utilities to create more expressive interactive link styles.

Pair text and decoration colors to create semantic link styles for different contexts.

Pill sizes

Size pill-style link elements with small, default, and large spacing variants.

Working with icons

Use inline-flex and gap utilities to align links with leading or trailing icons.

© 2026 Preline Labs.