How to write a link on tailwind that has button and icon classes

To create a link with button styles and an icon in Tailwind, you can combine classes for both the button and the icon. Here’s an example:

<a href="#" class="inline-flex items-center px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
  <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
    <path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14M12 5l7 7-7 7"></path>
  </svg>
  Go to
</a>

Here:

• inline-flex — places the elements in a row.
• items-center — vertically centers the content.
• px-4 py-2 — sets padding inside the button.
• bg-blue-500 and hover:bg-blue-600 — define the background color and hover effect.
• text-white — sets the text color to white.
• rounded — rounds the corners of the button.
• mr-2 — adds spacing to the right of the icon.
• Inside the <svg> tag — the icon itself (in this example, an arrow).

This code will create a button-style link with an icon and text.