Hugo, Tailwind and purge unexpected behaviour

support
1

I started to notice some of my styles on Netlify weren’t in the production CSS and thru a little testing I have established that when purge is true or the site is built in the production environment (effectively the same) that styles within a Hugo conditional that are compiled OK in development mode get purged.

Of course there is a way around this by adding the style directly to a class in the stylesheet but this behaviour is totally unexpected to me and according to my understanding of Tailwind its not how it works. I haven’t experienced this in any other language/template language just Hugo.

Example
<div class="max-w-730 content {{ if eq .large_copy_size true }} space-y-7.5 content--large{{ else }} space-y-2.25{{ end }}">
I will add the space-y-7.5 and space-y-2.25 to the content or content--large class where applicable to ensure its in the stylesheet.

To be 100% clear the class on the element is in the compiled HTML but not present in production CSS hence the style isn’t applied. The other inline Tailwind utility classes such as the max-w-730 work fine regardless of the environment just not the classes inside the conditional.

I’m not using JIT mode or anything fancy. Standard Tailwind setup with Netlify config setting HUGO_ENV = "production" so the Tailwind is automatically purged when built. Tested it locally to recreate the issue by enabling purge manually in the Tailwind config settings.

Strictly speaking I don’t know if this is directly related to Hugo but its the only time I’ve experienced this issue.
Is it unique to Hugo? Has anyone else encountered this or know anything about? Its not a blocker but I’d like to understand if there is a reason for this as it is contrary to my understanding of Tailwind.

Thank you

UPDATE: I’m inclined to think its a Tailwind issue as I did something similar in a previous Hugo project and it worked fine. Tailwind v2.2.8 in the current project with the issue and the previous project has Tailwind v2.1.2

2

In case anyone else runs into this issue its the dots in the space-y-2.5 and space-y-7.5 classes. The purge process mustn’t like it because of the dot notation in the Hugo variable in the conditional as I’m sure I’ve had Tailwind classes with dots inside conditionals before using Liquid, PHP etc.

Confirmed its the dot notation as if I assign the variable first then use it in the conditional everything works as expected {{ $large_copy_size := .large_copy_size }}

3

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