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-none 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-none 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-none 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-none 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-none 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-none 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-none 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-none 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-none 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-none 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-none 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-none 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-none 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-none 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-none 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-none 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-none 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-none 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-none 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-none focus:opacity-80" href="#">Secondary underline</a></p>
                  <p><a class="text-blue-600 underline decoration-blue-600 hover:opacity-80 focus:outline-none focus:opacity-80" href="#">Primary underline</a></p>
                  <p><a class="text-blue-600 underline decoration-teal-500 hover:opacity-80 focus:outline-none focus:opacity-80" href="#">Success underline</a></p>
                  <p><a class="text-blue-600 underline decoration-red-500 hover:opacity-80 focus:outline-none focus:opacity-80" href="#">Invalid underline</a></p>
                  <p><a class="text-blue-600 underline decoration-yellow-500 hover:opacity-80 focus:outline-none focus:opacity-80" href="#">Yellow underline</a></p>
                  <p><a class="text-blue-600 underline decoration-white hover:opacity-80 focus:outline-none 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-none 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-none 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-none 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-none 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-none 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-none 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-none 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-none 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-none 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-none focus:underline focus:decoration-yellow-500" href="#">Yellow underline</a></p>
                  <p><a class="text-blue-600 hover:underline hover:decoration-white focus:outline-none 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-none 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-none focus:opacity-80" href="#">Secondary underline</a></p>
                  <p><a class="text-blue-600 underline decoration-blue-600 hover:opacity-80 focus:outline-none focus:opacity-80" href="#">Primary underline</a></p>
                  <p><a class="text-teal-500 underline decoration-teal-500 hover:opacity-80 focus:outline-none focus:opacity-80" href="#">Success underline</a></p>
                  <p><a class="text-red-500 underline decoration-red-500 hover:opacity-80 focus:outline-none focus:opacity-80" href="#">Invalid underline</a></p>
                  <p><a class="text-yellow-500 underline decoration-yellow-500 hover:opacity-80 focus:outline-none focus:opacity-80" href="#">Yellow underline</a></p>
                  <p><a class="text-white underline decoration-white hover:opacity-80 focus:outline-none 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-none 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-none 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-none 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-none 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-none 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>