How are you using Hugo with Tailwinds/Tachyons etc?

support
1

I’m interested in using a CSS framework, such as Tailwinds or Tachyons, in my Hugo project.

With these frameworks, you don’t write CSS, but apply predefined classes to your HTML. Sounds great!

What’s the best way to apply the utility classes to the content in markdown files?

I see two approaches:

  1. Use HTML in the markdown posts, but this is suboptimal.

  2. Use multiple replace statements in the layout templates.

Better than the previous option, but this will involve a lot of replace statements. Here’s an example:

{{$content := .Content | replaceRE "<h1>" "<h1 class=\"text-6xl\">"}}
{{$content := $content | replaceRE "<h2>" "<h2 class=\"text-5xl\">"}}
{{$content := $content | replaceRE "<h3>" "<h3 class=\"text-4xl\">"}}
{{$content := $content | replaceRE "<p" "<p class=\"...\""}}
{{$content := $content | replaceRE "<a" "<a class=\"...\""}}
{{$content := $content | replaceRE "<ul" "<ul class=\"...\""}}
...
{{$content | safeHTML}}

What other options exist? How are you using these frameworks?

1 Like
2

Using your approach you have more granular control by each tag, which is nice, but you can also go on a simpler setting like having a class on the wrapper DIV called, i.e. “markdown” and extracting Tailwind styles on your CSS file for each tag underneath that div. :slight_smile:

1 Like
3

tailwind has @apply . so you can do something like this:

template.html

<article class="bg-blue-500">
{{ .Content }}
</article>

tailwind.css

@tailwind base;
@tailwind components;

article h1 {
  @apply text-6xl font-bold ;
}

article h2 {
  @apply text-5xl font-bold ;
}

article h3 {
  @apply text-4xl ;
}

@tailwind utilities;
4 Likes
4

Thanks for this.

This is the approach I’ll take if I end up going with Tailwinds. For Tachyons, it seems multiple replace statements will be the way to go as they don’t seem to offer @apply.

5

@runhide I’ve tested some of the ways integrating Hugo with Tailwind CSS and deploying to Netlify and put up a blog post, if you intend to use Tailwind have a look at https://thoughtexpo.com/setup-hugo-with-tailwindcss-for-netlify/

PS: This is my first attempt at web technologies and thanks a lot to hugo authors for making this possible for me :slight_smile:

2 Likes