style href links

How to style href links in Tailwind CSS?

Style href links in tailwind very easily. The Preflight feature in Tailwind will remove all of the browser’s default stylings for most components, providing you a fresh start to work with when it comes to cross-browser design consistency.

You can design a beautiful hyperlink using text-decoration. Tailwind provides many utilities for controlling the colour of text decorations.

For example:

decoration-inherittext-decoration-color: inherit;
decoration-currenttext-decoration-color: currentColor;
decoration-transparenttext-decoration-color: transparent;
decoration-blacktext-decoration-color: #000;
decoration-whitetext-decoration-color: #fff;
decoration-slate-50text-decoration-color: #f8fafc;
decoration-slate-100text-decoration-color: #f1f5f9;
decoration-slate-200text-decoration-color: #e2e8f0;
decoration-slate-300text-decoration-color: #cbd5e1;
decoration-slate-400text-decoration-color: #94a3b8;
decoration-slate-500text-decoration-color: #64748b;
decoration-slate-600text-decoration-color: #475569;

Setting the text-decoration color of hyperlinks

Use the decoration-{color} utilities to change the color of an element’s text-decoration.

For example:

<p>Lorem <a class="underline decoration-pink-500">ipsum</a> dolor sit amet <a class="underline decoration-sky-500">consectetur</a> adipisicing elit. <a class="underline decoration-indigo-500">Minus</a>, soluta.</p>

This example will produce the following output.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus, soluta.

If you are using React then write then replace the class attribute with className.

className="underline decoration-pink-500"

Changing the opacity of colorful underline

Add the percentage of the intensity of color to control the opacity of an element’s text-decoration color.

For example, we will add 30% of pink color with an intensity of 500:

<p>Lorem <a class="underline decoration-pink-500/30">ipsum</a>

Lorem ipsum

Hover, focus, and other states

This is also available for Hover, focus, and other states as well. Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:decoration-blue-400 to only apply the decoration-blue-400 utility on hover.

<p class="underline decoration-sky-600 hover:decoration-blue-400">
  <!-- your text with hyperlinks -->

Media queries and breakpoints

Variable modifiers can also be used to target media queries such as responsive breakpoints, dark mode, prefers-reduced-motion, and others. Use md:decoration-blue-400 to apply the decoration-blue-400 utility exclusively to medium and larger screen sizes.

<p class="underline decoration-sky-600 md:decoration-blue-400">
  <!-- your text with hyperlinks -->