PostCSS module build failed

I don’t know whether it’s a @nuxt/postcss8 bug or @nuxtjs/tailwindcss bug. The error emits only on the first build, the pages is blank. When I refreshed Nuxt for the second build, it works fine. Error lines below.

Version

@nuxtjs/tailwindcss: 4.0.1 nuxt: 2.15.3 postcss: 8.2.8 node: 14.6.0 yarn: 1.22.10

Reproduction Link

https://codesandbox.io/s/competent-bell-3j3ng

I’m running on Windows, I tested on Ubuntu with Github Actions and it outputs the same error.

What is actually happening?

  ERROR  Failed to compile with 1 errors                                                                                                          friendly-errors 14:47:43  


 ERROR  in ./node_modules/@nuxtjs/tailwindcss/dist/runtime/tailwind.css                                                                          friendly-errors 14:47:43  

Module build failed (from ./node_modules/@nuxt/postcss8/node_modules/postcss-loader/dist/cjs.js):                                                friendly-errors 14:47:43  
Error: Your config mentions the "[object Object]" variant, but "[object Object]" doesn't appear to be a variant. Did you forget or misconfigure a plugin that supplies that variant?
    at .\node_modules\@nuxtjs\tailwindcss\dist\runtime\tailwind.css:3:1
    at .\node_modules\tailwindcss\lib\lib\substituteVariantsAtRules.js:235:19
    at arrayEach (.\node_modules\lodash\lodash.js:516:11)
    at Function.forEach (.\node_modules\lodash\lodash.js:9368:14)
    at .\node_modules\tailwindcss\lib\lib\substituteVariantsAtRules.js:233:25
    at .\node_modules\postcss\lib\container.js:151:16
    at .\node_modules\postcss\lib\container.js:74:18
    at AtRule.each (.\node_modules\postcss\lib\container.js:60:16)
    at AtRule.walk (.\node_modules\postcss\lib\container.js:71:17)
    at .\node_modules\postcss\lib\container.js:79:24
    at Root.each (.\node_modules\postcss\lib\container.js:60:16)
    at Root.walk (.\node_modules\postcss\lib\container.js:71:17)
    at Root.walkAtRules (.\node_modules\postcss\lib\container.js:149:17)
    at .\node_modules\tailwindcss\lib\lib\substituteVariantsAtRules.js:217:11
    at LazyResult.runOnRoot (.\node_modules\postcss\lib\lazy-result.js:303:16)
    at LazyResult.runAsync (.\node_modules\postcss\lib\lazy-result.js:355:26)
    at LazyResult.async (.\node_modules\postcss\lib\lazy-result.js:205:30)
                                                                                                                                                 friendly-errors 14:47:43  
 @ ./node_modules/@nuxtjs/tailwindcss/dist/runtime/tailwind.css 4:14-207 15:3-20:5 16:22-215
 @ ./.nuxt/App.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi ./node_modules/eventsource-polyfill/dist/browserify-eventsource.js (webpack)-hot-middleware/client.js?reload=true&timeout=30000&ansiColors=&overlayStyles=&path=%2F__webpack_hmr%2Fclient&name=client ./.nuxt/client.js

[lsbyerley]

@aldy505 good call, seems to have resolved my issue 👍

[aldy505]

@Atinux but it works on v3🤔 Thanks anyway!