Applying default classes to HTML elements

support
1

Hello!

I’m converting a static design (HTML/CSS) to a Hugo theme. The static design uses Tailwind. It is all plain CSS, no fancy preprocessor/javascript or anything. It has been relatively smooth sailing but now I come to the blog posts. Blog posts are just articles with some headers (h2 etc) and ps.

The issue is that these HTML elements have (Tailwind) classes. For example <h2 class="h2 mb-4 text-gray-200">.

When writing blog posts these end up in a Markdown file. With the typical double pounds ## for headers and empty lines for paragraphs.

Is there a way to “apply” (is that the word?) the classes like mb-4 etc to the generated HTML? I know I can do something like ## my-header ## {class="mb-4"} but that seems overly repetitive and error-prone. I also know I can use partials but that seems heavy-handed too. Is there another way?

2

The correct way is to either use Tailwind’s Typography plugin or you style the markdown content in the input CSS file with @apply. I went with the latter or my project, but I wrapped the {{ .Content }} with a <div> class so the CSS would be specific. E.g.

<div class="content <!-- other Tailwind classes if required -->">
{{ .Content }}
</div>

Then in the input CSS file (or whatever yours is named)

@layer components {
  .content h2 {
  @apply <!--- your tailwind classes here, e.g mb-4-->
  }
}
1 Like
3

Is the @apply directive still a thing? It seems removed from Chrome: "@apply" | Can I use... Support tables for HTML5, CSS3, etc

I didn’t know about that Typography thing. That looks pretty close to what I was looking for. I’ll give it a try!

4

The Typography plugin was just what I needed! Many thanks.

5

Welcome! Please mark my answer as the solution if it works for you to close this topic.