Tailwind 为链接 Laravel 8 创建全局样式答案

【问题标题】：Tailwind create global style for link Laravel 8Tailwind 为链接 Laravel 8 创建全局样式
【发布时间】：2021-04-21 15:23:36
【问题描述】：

Tailwind 删除链接的默认样式，我尝试为所有链接添加下划线。

我试过了

@layer base {
  a {
    @apply underline;
  }

但我不知道将代码放在哪里，我在布局刀片 html 文件中尝试了内部样式标记，但它不起作用。

我试过了

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

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

这也不起作用，没有下划线。

但像这样工作

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

我错过了什么？为什么@apply 不起作用？以及如何创建全局样式？

【问题讨论】：

@layer ... 代码应该在您的 resources/css/app.css 文件中的顺风导入下方。再次运行npm run dev 以更新编译的css，它应该可以工作了。
它的工作，另一个问题，如果我只是希望某些 html 页面中的链接受到影响。通常我可以只使用
将类添加到您希望应用此样式的特定页面，而不是仅针对创建的类中的所有链接。

【解决方案1】：

您需要在项目的app.css或app.scss文件中将这些配置添加到base layout中。

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

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

如 cmets 中所述，如果您不希望它全局应用，请为此使用类名。

  .a-line {
    @apply underline;
  }

这边

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

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

【讨论】：