I have tailwindcss installed and working on a Hugo site side by side with another Hugo site where tailwind configuration is broken. The broken site requires that assets
are located in a directory above the site i.e:
project
/src
/site
config.yml :
"assetDir: ../src"
Thus:
/src/assets/css/
/src/assets/css/styles.scss
/src/assets/css/input.css
/src/assets/css/output.css
/src/assets/css/post.config.js
/site/tailwind.config.js
The error when running hugo server from the site level is:
TOCSS: failed to transform “assets/css/styles.scss”
The relevant line in “head.html”:
{{ $styles := resources.Get "./assets/css/styles.scss" | toCSS | postCSS (dict "config"
"./assets/css/postcss.config.js") }}
The contents of “./assets/css/styles.scss” is
@import “…/…/…/node_modules/tailwindcss/base.css”;
@import “…/…/…/node_modules/tailwindcss/components.css”;
@import “…/…/…/node_modules/tailwindcss/utilities.css”;
from the context of /src/assets/css, executing
cat ../../../node_modules/tailwindcss/base.css
verifies that the path referece to the tw node_modules is valid.
I suspect that contents of postcss.config.js is incorrect:
const themeDir = __dirname + ".";
module.exports = {
plugins: [
require("postcss-import")({
path: [themeDir]
}),
require("tailwindcss")("tailwind.config.js"),
require("autoprefixer")({
path: [themeDir]
}),
]
}
What is themeDir supposed to be pointing at?
Is the themeDir path relative to the location of the location of postcss.config.js?
How do we verify that tailwind.config.js is being processed?
I’ve got a working version same machine, side-by-side, this has to be simply a question of file loctions, configuratoin and paths.
Thanks for reading!