I am writing a web site in Hugo and Tailwind CSS (and learning as I go) and one point is not clear after reading both Hugo and tailwind documentation: how to override standard tags?
As an example: h1
. Imagine I would like it to apply to it classes .text-bold
and .text-xl
(these are Tailwind classes). What is the correct approach:
- using SCSS to
@extend
these classes?
h1 {
@extend .text-xl, .font-bold ;
}
→ does not work, the classes are not recognized:
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.
using some Hugo mechanism to replace on the fly
<h1>
with<h1 >
? (I do not know if this can be done)or something else?
CodePudding user response:
Tailwind CSS provides @apply
that allows exactly this.
h2 {
@apply font-extrabold text-3xl my-5;
}
CodePudding user response:
This can be done in Hugo by defining partials.
You need to create a file in layouts/partials
(for instance layouts/partials/tag.html
) which content is what you want to ultimately have in the HTML
<a href="/tags/{{ . }}" >{{ . }}</a>
This can be then used as {{ partial "tag.html" . }}
in your code.