How to overwrite a standard HTML tag?

Question

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
with
? (I do not know if this can be done)
or something else?

user_903011 · Answer

Tailwind CSS provides @apply that allows exactly this.

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

user_903011 · Answer

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

{{ . }}

This can be then used as {{ partial "tag.html" . }} in your code.

How to overwrite a standard HTML tag?

2 Answers