Components
Links

Content

Tailwind CSS Links

Link utilities are used to stylize your anchors to adjust their color, opacity, underline offset, underline color, and more.

Link opacity

Change the alpha opacity of the link color value with utilities.

                
                  <p><a class="text-blue-600 hover:text-blue-500 decoration-2 hover:underline focus:outline-hidden focus:underline opacity-90" href="#">Link opacity 90</a></p>
                  <p><a class="text-blue-600 hover:text-blue-500 decoration-2 hover:underline focus:outline-hidden focus:underline opacity-80" href="#">Link opacity 80</a></p>
                  <p><a class="text-blue-600 hover:text-blue-500 decoration-2 hover:underline focus:outline-hidden focus:underline opacity-70" href="#">Link opacity 70</a></p>
                  <p><a class="text-blue-600 hover:text-blue-500 decoration-2 hover:underline focus:outline-hidden focus:underline opacity-60" href="#">Link opacity 60</a></p>
                  <p><a class="text-blue-600 hover:text-blue-500 decoration-2 hover:underline focus:outline-hidden focus:underline opacity-50" href="#">Link opacity 50</a></p>
                  <p><a class="text-blue-600 hover:text-blue-500 decoration-2 hover:underline focus:outline-hidden focus:underline opacity-40" href="#">Link opacity 40</a></p>
                  <p><a class="text-blue-600 hover:text-blue-500 decoration-2 hover:underline focus:outline-hidden focus:underline opacity-30" href="#">Link opacity 30</a></p>
                  <p><a class="text-blue-600 hover:text-blue-500 decoration-2 hover:underline focus:outline-hidden focus:underline opacity-20" href="#">Link opacity 20</a></p>
                  <p><a class="text-blue-600 hover:text-blue-500 decoration-2 hover:underline focus:outline-hidden focus:underline opacity-10" href="#">Link opacity 10</a></p>

You can even change the opacity level on hover.

                
                  <p><a class="text-blue-600 opacity-90 hover:opacity-90 decoration-2 hover:underline focus:outline-hidden focus:underline" href="#">Link opacity 90</a></p>
                  <p><a class="text-blue-600 opacity-80 hover:opacity-80 decoration-2 hover:underline focus:outline-hidden focus:underline" href="#">Link opacity 80</a></p>
                  <p><a class="text-blue-600 opacity-70 hover:opacity-70 decoration-2 hover:underline focus:outline-hidden focus:underline" href="#">Link opacity 70</a></p>
                  <p><a class="text-blue-600 opacity-60 hover:opacity-60 decoration-2 hover:underline focus:outline-hidden focus:underline" href="#">Link opacity 60</a></p>
                  <p><a class="text-blue-600 opacity-50 hover:opacity-50 decoration-2 hover:underline focus:outline-hidden focus:underline" href="#">Link opacity 50</a></p>
                  <p><a class="text-blue-600 opacity-40 hover:opacity-40 decoration-2 hover:underline focus:outline-hidden focus:underline" href="#">Link opacity 40</a></p>
                  <p><a class="text-blue-600 opacity-30 hover:opacity-30 decoration-2 hover:underline focus:outline-hidden focus:underline" href="#">Link opacity 30</a></p>
                  <p><a class="text-blue-600 opacity-20 hover:opacity-20 decoration-2 hover:underline focus:outline-hidden focus:underline" href="#">Link opacity 20</a></p>
                  <p><a class="text-blue-600 opacity-10 hover:opacity-10 decoration-2 hover:underline focus:outline-hidden focus:underline" href="#">Link opacity 10</a></p>

Link underlines

Underline color

Change the underline’s color independent of the link text color.

                
                  <p><a class="text-blue-600 underline decoration-gray-800 hover:opacity-80 focus:outline-hidden focus:opacity-80 dark:decoration-white" href="#">Dark underline</a></p>
                  <p><a class="text-blue-600 underline decoration-gray-500 hover:opacity-80 focus:outline-hidden focus:opacity-80" href="#">Secondary underline</a></p>
                  <p><a class="text-blue-600 underline decoration-blue-600 hover:opacity-80 focus:outline-hidden focus:opacity-80" href="#">Primary underline</a></p>
                  <p><a class="text-blue-600 underline decoration-teal-500 hover:opacity-80 focus:outline-hidden focus:opacity-80" href="#">Success underline</a></p>
                  <p><a class="text-blue-600 underline decoration-red-500 hover:opacity-80 focus:outline-hidden focus:opacity-80" href="#">Invalid underline</a></p>
                  <p><a class="text-blue-600 underline decoration-yellow-500 hover:opacity-80 focus:outline-hidden focus:opacity-80" href="#">Yellow underline</a></p>
                  <p><a class="text-blue-600 underline decoration-white hover:opacity-80 focus:outline-hidden focus:opacity-80" href="#">Light underline</a></p>

Underline offset

Change the underline’s distance from your text.

                
                  <p><a class="text-blue-600 underline underline-offset-1 decoration-blue-600 hover:opacity-80 focus:outline-hidden focus:opacity-80" href="#">Underline offset 1</a></p>
                  <p><a class="text-blue-600 underline underline-offset-2 decoration-blue-600 hover:opacity-80 focus:outline-hidden focus:opacity-80" href="#">Underline offset 2</a></p>
                  <p><a class="text-blue-600 underline underline-offset-4 decoration-blue-600 hover:opacity-80 focus:outline-hidden focus:opacity-80" href="#">Underline offset 4</a></p>
                  <p><a class="text-blue-600 underline underline-offset-8 decoration-blue-600 hover:opacity-80 focus:outline-hidden focus:opacity-80" href="#">Underline offset 8</a></p>

Hover variants

Mix and match to create unique link styles.

                
                  <p><a class="text-blue-600 hover:underline hover:decoration-gray-800 focus:outline-hidden focus:underline focus:decoration-gray-800 dark:decoration-white" href="#">Dark underline</a></p>
                  <p><a class="text-blue-600 hover:underline hover:decoration-gray-500 focus:outline-hidden focus:underline focus:decoration-gray-500" href="#">Secondary underline</a></p>
                  <p><a class="text-blue-600 hover:underline hover:decoration-blue-600 focus:outline-hidden focus:underline focus:decoration-blue-600" href="#">Primary underline</a></p>
                  <p><a class="text-blue-600 hover:underline hover:decoration-teal-500 focus:outline-hidden focus:underline focus:decoration-teal-500" href="#">Success underline</a></p>
                  <p><a class="text-blue-600 hover:underline hover:decoration-red-500 focus:outline-hidden focus:underline focus:decoration-red-500" href="#">Invalid underline</a></p>
                  <p><a class="text-blue-600 hover:underline hover:decoration-yellow-500 focus:outline-hidden focus:underline focus:decoration-yellow-500" href="#">Yellow underline</a></p>
                  <p><a class="text-blue-600 hover:underline hover:decoration-white focus:outline-hidden focus:underline focus:decoration-white" href="#">Light underline</a></p>

Colored links

                
                  <p><a class="text-gray-800 underline decoration-gray-800 hover:opacity-80 focus:outline-hidden focus:opacity-80 dark:text-white dark:decoration-white" href="#">Dark underline</a></p>
                  <p><a class="text-gray-500 underline decoration-gray-500 hover:opacity-80 focus:outline-hidden focus:opacity-80" href="#">Secondary underline</a></p>
                  <p><a class="text-blue-600 underline decoration-blue-600 hover:opacity-80 focus:outline-hidden focus:opacity-80" href="#">Primary underline</a></p>
                  <p><a class="text-teal-500 underline decoration-teal-500 hover:opacity-80 focus:outline-hidden focus:opacity-80" href="#">Success underline</a></p>
                  <p><a class="text-red-500 underline decoration-red-500 hover:opacity-80 focus:outline-hidden focus:opacity-80" href="#">Invalid underline</a></p>
                  <p><a class="text-yellow-500 underline decoration-yellow-500 hover:opacity-80 focus:outline-hidden focus:opacity-80" href="#">Yellow underline</a></p>
                  <p><a class="text-white underline decoration-white hover:opacity-80 focus:outline-hidden focus:opacity-80" href="#">Light underline</a></p>

Types

White

White link examples.

                
                  <button type="button" class="py-1.5 px-2 inline-flex items-center gap-x-1 text-xs font-medium rounded-full border border-dashed border-gray-200 bg-white text-gray-800 hover:bg-gray-50 focus:outline-hidden focus:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700">
                    <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg>
                    Link-sm
                  </button>
                  <button type="button" class="py-2 px-3 inline-flex items-center gap-x-1 text-xs font-medium rounded-full border border-dashed border-gray-200 bg-white text-gray-800 hover:bg-gray-50 focus:outline-hidden focus:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700">
                    <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg>
                    Link
                  </button>
                  <button type="button" class="py-2.5 px-3 inline-flex items-center gap-x-1 text-xs font-medium rounded-full border border-dashed border-gray-200 bg-white text-gray-800 hover:bg-gray-50 focus:outline-hidden focus:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700">
                    <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg>
                    Link-lg
                  </button>

Working with icons

Working with icons example.

Back to home

Learn more

                
                  <a class="inline-flex items-center gap-x-1 text-sm text-gray-800 hover:text-blue-600 focus:outline-hidden focus:text-blue-600 dark:text-neutral-200 dark:hover:text-blue-500 dark:focus:text-blue-500" href="#">
                    <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
                    Back to home
                  </a>
                      
                  <a class="inline-flex items-center gap-x-1 text-sm text-blue-600 decoration-2 hover:underline focus:outline-hidden focus:underline font-medium dark:text-blue-500" href="#">
                    Learn more
                    <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                  </a>