Tailwind CSS Link

Use responsive link component with helper examples for button link, link color, underline, hover, link style & more. Free download, open-source license.

Colored links

Coloring links can be a great way to distinguish them from your regular text, or add a bit of flair to your website.

Primary link Secondary link Success link Danger link Info link Info link

HTML

        
            
      <a
        href="#!"
        class="text-primary transition duration-150 ease-in-out hover:text-primary-600 focus:text-primary-600 active:text-primary-700 dark:text-primary-400 dark:hover:text-primary-500 dark:focus:text-primary-500 dark:active:text-primary-600"
        >Primary link</a
      >
      <a
        href="#!"
        class="text-secondary transition duration-150 ease-in-out hover:text-secondary-600 focus:text-secondary-600 active:text-secondary-700"
        >Secondary link</a
      >
      <a
        href="#!"
        class="text-success transition duration-150 ease-in-out hover:text-success-600 focus:text-success-600 active:text-success-700"
        >Success link</a
      >
      <a
        href="#!"
        class="text-danger transition duration-150 ease-in-out hover:text-danger-600 focus:text-danger-600 active:text-danger-700"
        >Danger link</a
      >
      <a
        href="#!"
        class="text-warning transition duration-150 ease-in-out hover:text-warning-600 focus:text-warning-600 active:text-warning-700"
        >Info link</a
      >
      <a
        href="#!"
        class="text-info transition duration-150 ease-in-out hover:text-info-600 focus:text-info-600 active:text-info-700"
        >Info link</a
      >
      <div class="bg-neutral-800">
        <a
          href="#!"
          class="text-neutral-50 transition duration-150 ease-in-out hover:text-neutral-100 focus:text-neutral-100 active:text-neutral-200"
          >Light link</a
        >
      </div>
      <a
        href="#!"
        class="text-neutral-800 transition duration-150 ease-in-out hover:text-neutral-800 focus:text-neutral-800 active:text-neutral-900 dark:text-neutral-900 dark:hover:text-neutral-900 dark:focus:text-neutral-900 dark:active:text-neutral-900"
        >Dark link</a
      >
      <div class="bg-neutral-800">
        <a
          href="#!"
          class="text-white transition duration-150 ease-in-out hover:text-neutral-100 focus:text-neutral-100 active:text-neutral-200"
          >White link</a
        >
      </div>
      <a href="#!" class="text-black transition duration-150 ease-in-out"
        >Black link</a
      >

Hey there 👋 we want to make TW elements a community-driven project. It's open source and free, and we would like it to stay that way. If you enjoy it, help the project grow by sharing it with your peers. Every share counts, thank you!

Share via Reddit Share via StumbleUpon

Within the sentence

Use color depending on whether it has been visited, is unvisited, or is active.

This is an example of how the basic link looks in the middle of the sentence.

This is an example of how the standard primary link looks in the middle of the sentence.

HTML

        
            
      <p class="mb-4">
        This is an example of how the basic
        <a href="#!" class="underline">link</a> looks in the middle of the
        sentence.
      </p>
      <p>
        This is an example of how the
        <a
          href="#!"
          class="text-primary transition duration-150 ease-in-out hover:text-primary-600 focus:text-primary-600 active:text-primary-700 dark:text-primary-400 dark:hover:text-primary-500 dark:focus:text-primary-500 dark:active:text-primary-600"
          >standard primary link</a
        >
        looks in the middle of the sentence.
      </p>

Underline

use the .underline property to specify that an underline should appear under your text.

Hi! I'm a link

Underline on hover

Use a simple visual effect to underline text on hover.

Hi! I'm a link with underline on hover

HTML

        
            
      <a
        href="#!"
        class="underline decoration-transparent transition duration-300 ease-in-out hover:decoration-inherit"
        >A link with underline on hover</a
      >

Button link

Use the code below to create a button that looks like an active link.

HTML
javascript

        
            
      <button
        type="button"
        data-te-ripple-init
        data-te-ripple-color="light"
        class="rounded px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-600 focus:text-primary-600 focus:outline-none focus:ring-0 active:text-primary-700 dark:hover:bg-neutral-700">
        Link
      </button>

        
            
      // Initialization for ES Users
      import {
        Ripple,
        initTE,
      } from "tw-elements";
      
      initTE({ Ripple });

Link

Colored links

Within the sentence

Underline

Underline on hover

Button link

Related resources

Tutorials:

Extended Docs:

Design System (Figma):