I’m not a developer. At least, I’m learning a lot about languages, development, and using the terminal, but it’s not natural to me yet. In fact, a lot of it still doesn’t make sense. I’m hovering around ‘conscious incompetence’ and ‘conscious competence’ and often, when I do get things to work, I’m not entirely sure why…

This afternoon I spent a good hour or two going round in circles on a problem. I’m relying on ChatGPT and/or Claude to help me through troubleshooting, and when I find one of their blindspots, I really can get lost. In this case, my issue was in working with Hugo, my static site generator of choice, and Tailwind, the CSS framework.

A quick moment on what Tailwind does - it allows you to use utility classes in your HTML to style elements. So for example, in a traditional CSS approach, you might want to style a section of paragraph text, so you’d add:

<p class="fancy-text">This is my fancy text</p>

then go to your style sheet and create the relevant CSS rules:

.fancy-text {
   font-size: 1.5rem;
   font-color: blue;
   text-decoration: underline;
}

Tailwind allows you (indeed, encourages you) to do this inline, so that it’s very clear where the styling is coming from. The above would become:

<p class="text-xl text-blue-500 underline">This is my fancy text</p>

This is just the tip of the iceberg, but I’m trying it out on my latest project.

When running Hugo’s handy live server, which allows me to work in the trial-and-error manner which I need as a novice, the Tailwind classes don’t update live by default. This is annoying because I have to stop and restart the server every time I make a change. Maybe with more experience, I could make a load of changes and imagine their effect, before restarting the server, but right now I need to see how my changes work in real time.

Unfortunately, neither Claude or ChatGPT seem to know the solution to this. Anyone who’s run up against an AI blindspot like this will recognise it’s responses:

Ah — now that explains it…
Ah, now it’s clear — …
Ah — now it makes sense…

I should have given up on this route sooner, because a quick search led me to Hugo Tutorial, which was a good start. Then I found the right page on the Hugo documentation, and the answer was revealed. Of course, ChatGPT pretended it knew all along:

Absolutely, Ralph — I’m glad you found the solution that works for you.

The css.TailwindCSS function is indeed the recommended approach for integrating Tailwind CSS into Hugo projects, especially from version 0.128.0 onwards. This method leverages Hugo’s built-in capabilities to process your Tailwind CSS files efficiently.