Problem with Hugo and Tailwindcss v2.0+

support
#1

Greetings,

I’m having problems using Tailwindcss v2.0+ with Hugo but when I try tailwindcss@^1.9, everything works fine.
Running Linux in a docker container (based on golang:1.15.5-alpine3.12) and using latest versions of postcss, autoprefixer and postcss-cli (all installed globally). Installed Hugo 0.79 from a tarball but also tried older versions.

dev_1     | Start building sites …
dev_1     | Built in 1652 ms
dev_1     | Error: Error building site: POSTCSS: failed to transform "css/styles.css" (text/css): Error: [object Object] is not a PostCSS plugin
dev_1     |     at Processor.normalize (/usr/lib/node_modules/tailwindcss/node_modules/postcss/lib/processor.js:168:15)
dev_1     |     at new Processor (/usr/lib/node_modules/tailwindcss/node_modules/postcss/lib/processor.js:52:25)
dev_1     |     at postcss (/usr/lib/node_modules/tailwindcss/node_modules/postcss/lib/postcss.js:55:10)
dev_1     |     at /usr/lib/node_modules/tailwindcss/lib/util/parseObjectStyles.js:24:33
dev_1     |     at arrayMap (/usr/lib/node_modules/tailwindcss/node_modules/lodash/lodash.js:639:23)
dev_1     |     at map (/usr/lib/node_modules/tailwindcss/node_modules/lodash/lodash.js:9580:14)
dev_1     |     at Function.flatMap (/usr/lib/node_modules/tailwindcss/node_modules/lodash/lodash.js:9283:26)
dev_1     |     at parseObjectStyles (/usr/lib/node_modules/tailwindcss/lib/util/parseObjectStyles.js:23:26)
dev_1     |     at parseObjectStyles (/usr/lib/node_modules/tailwindcss/lib/util/parseObjectStyles.js:20:12)
dev_1     |     at /usr/lib/node_modules/tailwindcss/lib/util/processPlugins.js:37:123
bf_web_dev_1 exited with code 255

content of styles.css

@tailwind base;

@tailwind components;
@tailwind utilities;
...

postcss.config.js

module.exports = {    
    plugins: [        
      require('tailwindcss'),
      require('autoprefixer'),
    ]
  }

Any ideas what I could try?

#2

Try a different format of the configuration file.

module.exports = {
  "plugins": {
    "tailwindcss": {},
    "autoprefixer": {}
  }
}

If that does not work then check if all plugins are actually installed, but the Error: [object Object] is not a PostCSS plugin points to the configuration format.

#3

Thank you for the suggestion. I tried it but got the same message. I think all the necessary packages are installed and it works fine with tailwindcss@^1.9

Installed global packages

dev_1     | +-- autoprefixer@10.0.4
dev_1     | +-- firebase-tools@8.16.2
dev_1     | +-- npm@6.14.6
dev_1     | +-- postcss@8.1.10
dev_1     | +-- postcss-cli@8.3.0
dev_1     | `-- tailwindcss@2.0.1

tailwind.config.js

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Has anybody else encountered a similar problem with Tailwindcss 2 and Hugo? It is perhaps worth mentioning that Tailwindcss 2 is a fairly new version, published 12 days.

#4

It is working (both hugo server as well as normal build) for me with the following config:

package.json

	"devDependencies": {
	"@tailwindcss/typography": "^0.3.0",
	"autoprefixer": "^10.0.4",
	"postcss": "^8.1.10",
	"postcss-cli": "^8.3.0",
	"postcss-purgecss": "^2.0.3",
	"tailwindcss": "^2.0.1"
},

tailwind.config.js

const theme = require('tailwindcss/defaultTheme');
const typography = require('@tailwindcss/typography');

//const colorBrand = 'var(--color-pretty)';

// 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
	experimental: {
		// See https://github.com/tailwindlabs/tailwindcss/pull/2159
		applyComplexClasses: true
	},
	purge: {
		enabled: process.env.HUGO_ENVIRONMENT === 'production',
		content: [ './hugo_stats.json' ],
		mode: 'all',
		options: {
			//whitelist: [ 'pl-1', 'pl-3' ],
			defaultExtractor: (content) => {
				let els = JSON.parse(content).htmlElements;
				els = els.tags.concat(els.classes, els.ids);
				return els;
			}
		}
	},
	plugins: [ typography ]
};

postcss.config.js

let tailwindConfig = process.env.HUGO_FILE_TAILWIND_CONFIG_JS || './tailwind.config.js';
const tailwind = require('tailwindcss')(tailwindConfig);
const autoprefixer = require('autoprefixer');

module.exports = {
// eslint-disable-next-line no-process-env
plugins: [ tailwind, ...(process.env.HUGO_ENVIRONMENT === 'production' ? [ autoprefixer ] : []) ]
};

The last two are taken from bep’s tailwind starter.

However, I had to delete the node_modules folder before it started working. Maybe that’s the trick?

#5

I just updated the starter to v2, which seems to have gone smooth:

1 Like
#6

I was not able to get it to work. Maybe it is related to the fact I installed the packages globally in a docker container.

...
RUN npm install -g  autoprefixer@^10.0.4
RUN npm install -g  postcss@^8.1.0
RUN npm install -g  postcss-cli@^8.3.0
RUN npm install -g  postcss-purgecss@^2.0.3
RUN npm install -g  tailwindcss@2.0.1
...

Some dependencies were maybe not installed.

I did however stringify the object to get more info:
Error: Error building site: POSTCSS: failed to transform “css/styles.css” (text/css): Error: {“postcssPlugin”:“postcss-nested”} is not a PostCSS plugin

I don’t know if this helps.

I will try installing the packages locally in instead like you do in your examples.

#7

It worked when I installed the packages locally (using npm install package.json). Thanks for the help everybody.

#8

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