Tailwind CSS changes not applied till server restart

Hrishikesh · April 21, 2021, 8:13am

Hello.

I’m trying out Tailwind CSS with Hugo. I’m not using any starters or anything, just a pretty empty website as of now. However, any class name that I add does not show changes till I restart the server. The class is getting added to the HTML just fine, but it’s not being added to the generated stylesheet until I restart the server.

I can’t figure out if it’s something wrong that I’m doing (most likely), or a Tailwind problem or a Hugo problem.

Does anyone have any idea related to this or any clues from where I can start digging. Here’s a repo to test: GitHub - Hrishikesh-K/Hugo-Tailwind: Hugo + Tailwind CSS.

In the HTML files, try changing class names or adding new ones. The changes are only correctly reflected once server is restarted.

bep · April 21, 2021, 10:56am

Hugo does not recompile the CSS on HTML layout changes. This is slow and most likely not what you want.

Long story short, turn off the purge when not in production (e.g. when you’re developing):

github.com

bep/hugo-starter-tailwind-basic/blob/master/tailwind.config.js#L15




// Utils
const round = (num) => num.toFixed(7).replace(/(\.[0-9]+?)0+$/, '$1').replace(/\.0$/, '');
const rem = (px) => `${round(px / 16)}rem`;
const em = (px, base) => `${round(px / base)}em`;
const px = (px) => `${px}px`;


module.exports = {
	important: true, // See https://tailwindcss.com/docs/configuration#important
	purge: {
		enabled: process.env.HUGO_ENVIRONMENT === 'production',
    content: [
      './hugo_stats.json',
      './layouts/**/*.html',
		],
		extractors: [
      {
        extractor: (content) => {
					let els = JSON.parse(content).htmlElements;
					return els.tags.concat(els.classes, els.ids);
				},

Hrishikesh · April 21, 2021, 11:22am

That makes sense. Thanks a lot @bep.

system · April 23, 2021, 11:22am

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

Topic		Replies	Views
Hugo and Tailwind refresh issue support	16	1429	April 12, 2023
Tailwind setup support tailwind	4	1022	January 8, 2024
Race between Tailwind CSS vs Hugo stats file support	5	420	April 8, 2024
Tailwind JIT and Hugo Purge issues support	10	2760	December 21, 2021
Hugo's Tailwind starter template CSS issue support	7	972	July 19, 2023

Tailwind CSS changes not applied till server restart

Related topics