如何覆盖标准 HTML 标签？

Question

我正在 Hugo and Tailwind CSS 中编写一个网站（边学边做），在阅读了 Hugo 和 tailwind 文档后有一点不清楚：如何覆盖标准标签？

例如：h1。想象一下，我希望它适用于类 .text-bold 和 .text-xl（这些是 Tailwind 类）。正确的做法是什么：

使用 SCSS @extend 这些类?

h1 {
    @extend .text-xl, .font-bold ;
}

→ 不起作用，类无法识别：

Error: Error building site: TOCSS: failed to transform "styleScssSource.scss" (text/x-scss): SCSS processing failed: file "stdin", line 2, col 23: The target selector was not found.
Use "@extend .font-bold !optional" to avoid this error.

使用某种 Hugo 机制将 <h1> 动态替换为 <h1 class="text-xl font-bold">？（不知道能不能做到）
还是别的？

Answer 1

Tailwind CSS 提供了 @apply 可以做到这一点。

h2 {
  @apply font-extrabold text-3xl my-5;
}

Answer 2

这可以在 Hugo 中通过定义 partials 来完成。

您需要在 layouts/partials（例如 layouts/partials/tag.html）中创建一个文件，其中的内容是您最终希望在 HTML

中拥有的内容

<a href="/tags/{{ . }}" class="bg-gray-300 text-sm rounded-full p-1 px-2">{{ . }}</a>

这可以在您的代码中用作 {{ partial "tag.html" . }}。

如何覆盖标准 HTML 标签？

How to overwrite a standard HTML tag?

css

hugo

tailwind-css