Tailwind create global style for link Laravel 8

Question

Tailwind remove default style for link, I try to add underline to all links.

I tried

@layer base {
  a {
    @apply underline;
  }

But I have no idea where to put the code, I tried inside style tag in my layout blade html file, but its not working.

I tried

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

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

This not working either, no underline.

but like this working

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

What am I missing? Why is @apply not working? and How do I create global style?

The @layer ... code should be in your resources/css/app.css file below the tailwind imports. Run again npm run dev to update the compiled css and it should work. — IGP
– IGP, Commented Jan 16, 2021 at 23:42
its working, another question if I just want links in certain html page to be affected. Normally I can just use <style>, how to do it with tailwind? — Tom Kur
– Tom Kur, Commented Jan 17, 2021 at 0:21
Add a class to specific pages that you want this style to apply on, and than only target all links in the created class. — user7064270
– user7064270, Commented Jan 17, 2021 at 0:28

Digvijay · Accepted Answer · 2021-01-17 05:20:23Z

3

You need to add such configurations to base layout in app.css or app.scss file in your project.

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

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

As mentioned in the comments, if you would like this to not apply globally, then use a class name for this.

  .a-line {
    @apply underline;
  }

This way

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

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

answered Jan 17, 2021 at 5:20

Digvijay

9,0453 gold badges44 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

1 Answer 1