Is there a way to have the links underlined by default with tailwind?

When using Tailwind CSS, you can apply default underline styles to links through several methods. Here are some approaches and examples:

Method 1: Directly Add the Class to HTML Elements

The simplest approach is to directly add the underline class to your link elements (<a> tags). This class is one of Tailwind's utility classes designed to add text underlines.

html
<a href="https://example.com" class="underline">Visit Example.com</a>

Method 2: Use CSS Extension

If you want to apply default underline styles to all links across your project, you can use the extend feature in Tailwind's configuration file to globally define styles. This way, you don't need to add the class individually to each link.

First, ensure Tailwind CSS is installed in your project and that tailwind.config.js is correctly configured. Then, extend Tailwind's default theme to achieve this.

javascript
// tailwind.config.js
module.exports = {
  extend: {
    // Extend base styles
    typography: {
      DEFAULT: {
        css: {
          'a': {
            textDecoration: 'underline', // Apply underline to all links
          },
        },
      },
    },
  },
}

Method 3: Combine Tailwind CSS with Custom CSS

If you need more complex styles or conditions, you can combine Tailwind's utility classes with custom CSS. For example, you might only want to display the underline under specific conditions, such as when hovering over the link.

html
<a href="https://example.com" class="hover:underline">Visit Example.com</a>

In this example, the hover:underline class means the underline will only appear when hovering over the link.

Summary

Depending on your specific needs, you can choose to directly use utility classes in HTML, set up global styles via Tailwind configuration, or combine Tailwind with custom CSS. Each method has its appropriate use cases, and you can select based on the scale and requirements of your project.