Dynamic tailwind class not showing

support
1

Trying to figure out how to get the following to allow tailwind. I’ve followed this conversation and have the setup as @bep does except for a slight modification to let tailwind 3.0 work on my page.

{{.Scratch.Set "primary_dark" (print "bg-["  .Params.dark_accent_color  "]") }}
<div class="{{ .Scratch.Get "primary_dark"  }} ">Some text </div>

I can see the tailwind class in the divs classes but it doesn’t render. Alternatively setting it statically to {{.Scratch.Set "primary_dark" bg-[#666666] }} seems to allow it to go through just fine.
See below for my frontmatter/head files.

---
dark_accent_color: '#666666'
---

{{ hugo.Generator }}
   {{ $options := dict "inlineImports" true }}
   {{ $styles := resources.Get "css/main.css" }} 
   {{ $styles = $styles | resources.PostCSS $options }}
   {{ if hugo.IsProduction }}
   	{{ $styles = $styles | minify | fingerprint | resources.PostProcess  }} 
   {{else }}
   	{{ $styles = $styles | resources.ExecuteAsTemplate (printf "tailwind.dev.%v.css" now.UnixMilli) .}}
   {{ end }}
   <link href="{{ $styles.Permalink }}" rel="stylesheet" />
2

For those coming in with a similar question:

This is explicity written as a “Do-not-do” in the tailwinds documentation [here] (Content Configuration - Tailwind CSS) for anyone coming at this behind me. However now I wonder what the workaround for this would be. So far it seems to be adding the dynamic variable into a style parameter instead.

If anyone has thoughts or other workarounds I, and others here surely, would love to see them.

3

Just don’t concatenate strings for classes, as Tailwind JIT or PurgeCss in previous versions will have no idea those classes exist in your template.

I’d suggest simply setting the class(es) you want directly, don’t over-complicate things.

---
pageStyle: 'bg-gray-100 dark:bg-gray-900'
---
4

hi @tracykev

I am using the tailwindcss3 with Hugo and have custom colours like primary, secondary and alot of form and other modification in tailwind.config.js but all seems to be working as normal on my end

you are following a conversation from last year I recommend you read this article by @Jonas_D and check the provided repo to compare your setup.

I hope this will help you thanks

5

Yes, the problem exists in interfacing with our CMS. Bit of detail I left out. I could add a dropdown with just the tailwind options but my clients would very much not like that. so essentially I am left with a front matter such as above.

6

It would be interesting to see how your frontmatter is formatted. I am stuck by convention to the style I mentioned above in the frontmatter with my CMS. The article workaround you mentioned is already present in my code with the only difference being using the time as the random seed.

7

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.