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

Posted 2023-03-07

【中文标题】Tailwind 为链接 Laravel 8 创建全局样式

【英文标题】：Tailwind create global style for link 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