Develop a custom global style for links in Laravel 8 using Tailwind CSS

Question

I am struggling with Tailwind CSS and trying to remove the default style for links while adding an underline to all of them.

I attempted:

@layer base {
  a {
    @apply underline;
  }

However, I can't figure out where to place this code. I tried putting it inside a style tag in my layout blade HTML file, but it didn't work.

Another attempt was:

<style>
ul-link{
 @apply underline;
}
</style>

...
<div class="ul-link">Test</div>

This approach also did not work as there was no underline visible.

Surprisingly, using the following structure worked:

<div class="underline">Test</div>

I am puzzled by why @apply is not working and unsure how to create a global style. What could I be missing?

Answer 1

Answer №1

To incorporate these configurations, you must include them in the base layout section of your app.css or app.scss file within your project.

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  a {
    @apply underline;
  }
}

If you prefer not to apply these styles globally, you can assign a class name for this purpose.

.a-line {
    @apply underline;
}

This approach allows you to differentiate between elements:

<a href="#">Text 1</a>

<a href="#" class="a-link">Text 2</a> // will have underline

Answer 2

To incorporate these configurations, you must include them in the base layout section of your app.css or app.scss file within your project.

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  a {
    @apply underline;
  }
}

If you prefer not to apply these styles globally, you can assign a class name for this purpose.

.a-line {
    @apply underline;
}

This approach allows you to differentiate between elements:

<a href="#">Text 1</a>

<a href="#" class="a-link">Text 2</a> // will have underline