After some time, I realized the problem was in my Tailwind config. In localhost it worked just fine, but in production it did not. My Hugo project is hosted in a directory named src
.
tailwind.config.js
before:
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: 'class',
content: [
"./themes/**/layouts/**/*.html",
"./content/**/layouts/**/*.html",
"./layouts/**/*.html",
"./content/**/*.html",
"./content/**/*.md"
],
theme: {
extend: {
fontFamily: {
'sans' : ['"Inter"', '-apple-system' , 'BlinkMacSystemFont', 'avenir next', 'avenir', 'segoe ui', 'helvetica neue', 'helvetica', 'Cantarell', 'Ubuntu', 'roboto', 'noto', 'arial', 'sans-serif'],
},
},
},
plugins: [],
variants: ['group-hover'],
}
tailwind.config.js
then:
import path from 'path';
// When deploying to production, set the base directory to your Hugo project's root directory.
const baseDir = path.join(__dirname, '..');
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: 'class',
content: [
`${baseDir}/themes/**/layouts/**/*.html`,
`${baseDir}/content/**/layouts/**/*.html`,
`${baseDir}/layouts/**/*.html`,
`${baseDir}/content/**/*.html`,
`${baseDir}/content/**/*.md`,
`${baseDir}/public/**/*.html`,
],
theme: {
extend: {
fontFamily: {
'sans': ['"Inter"', '-apple-system', 'BlinkMacSystemFont', 'avenir next', 'avenir', 'segoe ui', 'helvetica neue', 'helvetica', 'Cantarell', 'Ubuntu', 'roboto', 'noto', 'arial', 'sans-serif'],
},
},
},
plugins: [],
variants: ['group-hover'],
}
This was a quite frustrating task but it came to a happy end.