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 opacity-90" href="#">Link opacity 90</a></p>
                  <p><a class="text-blue-600 hover:text-blue-500 opacity-80" href="#">Link opacity 80</a></p>
                  <p><a class="text-blue-600 hover:text-blue-500 opacity-70" href="#">Link opacity 70</a></p>
                  <p><a class="text-blue-600 hover:text-blue-500 opacity-60" href="#">Link opacity 60</a></p>
                  <p><a class="text-blue-600 hover:text-blue-500 opacity-50" href="#">Link opacity 50</a></p>
                  <p><a class="text-blue-600 hover:text-blue-500 opacity-40" href="#">Link opacity 40</a></p>
                  <p><a class="text-blue-600 hover:text-blue-500 opacity-30" href="#">Link opacity 30</a></p>
                  <p><a class="text-blue-600 hover:text-blue-500 opacity-20" href="#">Link opacity 20</a></p>
                  <p><a class="text-blue-600 hover:text-blue-500 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" href="#">Link opacity 90</a></p>
                  <p><a class="text-blue-600 opacity-80 hover:opacity-80" href="#">Link opacity 80</a></p>
                  <p><a class="text-blue-600 opacity-70 hover:opacity-70" href="#">Link opacity 70</a></p>
                  <p><a class="text-blue-600 opacity-60 hover:opacity-60" href="#">Link opacity 60</a></p>
                  <p><a class="text-blue-600 opacity-50 hover:opacity-50" href="#">Link opacity 50</a></p>
                  <p><a class="text-blue-600 opacity-40 hover:opacity-40" href="#">Link opacity 40</a></p>
                  <p><a class="text-blue-600 opacity-30 hover:opacity-30" href="#">Link opacity 30</a></p>
                  <p><a class="text-blue-600 opacity-20 hover:opacity-20" href="#">Link opacity 20</a></p>
                  <p><a class="text-blue-600 opacity-10 hover:opacity-10" 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 dark:decoration-white" href="#">Dark underline</a></p>
                  <p><a class="text-blue-600 underline decoration-gray-500 hover:opacity-80" href="#">Secondary underline</a></p>
                  <p><a class="text-blue-600 underline decoration-blue-600 hover:opacity-80" href="#">Primary underline</a></p>
                  <p><a class="text-blue-600 underline decoration-teal-500 hover:opacity-80" href="#">Success underline</a></p>
                  <p><a class="text-blue-600 underline decoration-red-500 hover:opacity-80" href="#">Invalid underline</a></p>
                  <p><a class="text-blue-600 underline decoration-yellow-500 hover:opacity-80" href="#">Yellow underline</a></p>
                  <p><a class="text-blue-600 underline decoration-white hover: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" href="#">Underline offset 1</a></p>
                  <p><a class="text-blue-600 underline underline-offset-2 decoration-blue-600 hover:opacity-80" href="#">Underline offset 2</a></p>
                  <p><a class="text-blue-600 underline underline-offset-4 decoration-blue-600 hover:opacity-80" href="#">Underline offset 4</a></p>
                  <p><a class="text-blue-600 underline underline-offset-8 decoration-blue-600 hover: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 dark:decoration-white" href="#">Dark underline</a></p>
                  <p><a class="text-blue-600 hover:underline hover:decoration-gray-500" href="#">Secondary underline</a></p>
                  <p><a class="text-blue-600 hover:underline hover:decoration-blue-600" href="#">Primary underline</a></p>
                  <p><a class="text-blue-600 hover:underline hover:decoration-teal-500" href="#">Success underline</a></p>
                  <p><a class="text-blue-600 hover:underline hover:decoration-red-500" href="#">Invalid underline</a></p>
                  <p><a class="text-blue-600 hover:underline hover:decoration-yellow-500" href="#">Yellow underline</a></p>
                  <p><a class="text-blue-600 hover:underline hover:decoration-white" href="#">Light underline</a></p>

Colored links

                
                  <p><a class="text-gray-800 underline decoration-gray-800 hover: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" href="#">Secondary underline</a></p>
                  <p><a class="text-blue-600 underline decoration-blue-600 hover:opacity-80" href="#">Primary underline</a></p>
                  <p><a class="text-teal-500 underline decoration-teal-500 hover:opacity-80" href="#">Success underline</a></p>
                  <p><a class="text-red-500 underline decoration-red-500 hover:opacity-80" href="#">Invalid underline</a></p>
                  <p><a class="text-yellow-500 underline decoration-yellow-500 hover:opacity-80" href="#">Yellow underline</a></p>
                  <p><a class="text-white underline decoration-white hover: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 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-700">
                    <svg class="flex-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 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-700">
                    <svg class="flex-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 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-700">
                    <svg class="flex-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 dark:text-neutral-200 dark:hover:text-blue-500" href="#">
                    <svg class="flex-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 font-medium dark:text-blue-500" href="#">
                    Learn more
                    <svg class="flex-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>

On this page