Currently, I am developing a website using Hugo and Tailwind CSS while learning along the way. One aspect that remains unclear to me after going through both Hugo and Tailwind documentation is how to override standard tags.
For instance, let's take the h1 tag. What if I want to apply classes like .text-bold and .text-xl (which are Tailwind classes) to it? How should I proceed?
- Should I use SCSS to
@extendthese classes in the following manner:
h1 {
@extend .text-xl, .font-bold ;
}
However, this approach does not seem to work as 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.
Is there a Hugo feature or mechanism that can dynamically replace
<h1>with
? (I am uncertain if such functionality exists)<h1 class="text-xl font-bold">Or perhaps there is another method to achieve this?