`nuxt generate` fails if Nuxt Tailwind is installed and the CSS `calc(var(--variable) * -1)` is used.

If Nuxt Tailwind is installed and the project has CSS like calc(var(--variable-name) * -1);, the project will not generate. If you remove the * -1 it works fine. If you comment Nuxt Tailwind in nuxt.config.js, it also works fine. This issue also does not show up during development with the simple nuxt command, only when generating with nuxt generate.

Update: I also tried running npx tailwindcss-cli@latest build ./input.css -o ./output.css with the CSS below (identical to that in the project which is also below), and it worked just fine. So I don’t think this is a issue with Tailwind itself.

input.css

@tailwind base;
@tailwind components;
@tailwind utilities;

.test {
  --test: -100px;

  width: 100px;
  height: 100px;
  margin-top: calc(var(--test) * -1);
  background-color: lightsalmon;
}

Project Files (Minimal Reproduction)

The GitHub project linked below is extremely simple. To try and make things easier for you all, here are the contents of the 3 files it contains.

package.json

{
  "dependencies": {
    "@nuxtjs/tailwindcss": "^4.1.2",
    "nuxt": "^2.15.6",
    "postcss": "^8.2.15"
  }
}

nuxt.config.js

export default {
  target: "static",
  // Comment the line below and the project will generate just fine.
  buildModules: ["@nuxtjs/tailwindcss"]
};

pages/index.vue

<template>
  <div class="test"></div>
</template>

<style>
.test {
  --test: -100px;

  width: 100px;
  height: 100px;
  margin-top: calc(var(--test) * -1);
  background-color: lightsalmon;
}
</style>

Version

@nuxtjs/tailwindcss: v4.1.2 nuxt: v2.15.6

Reproduction Link

https://github.com/AaronBeaudoin/nuxt-tailwind-bug

Steps to reproduce

1. npm i
2. npx nuxt generate

What is Expected?

The static site generates when using nuxt generate.

What is actually happening?

This error appears when using nuxt generate but not when using nuxt:

ERROR in ./pages/index.vue?vue&type=style&index=1&id=58b3fa2b&lang=scss&scoped=true& (./node_modules/@nuxt/postcss8/node_modules/css-loader/dist/cjs.js??ref--7-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/@nuxt/postcss8/node_modules/postcss-loader/dist/cjs.js??ref--7-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--7-oneOf-1-3!./node_modules/vue-loader/lib??vue-loader-options!./pages/index.vue?vue&type=style&index=1&id=58b3fa2b&lang=scss&scoped=true&)
Module build failed (from ./node_modules/@nuxt/postcss8/node_modules/postcss-loader/dist/cjs.js):
ParserError: Syntax Error at line: 1, column 18
    at /Volumes/Local/nuxt-test/pages/index.vue:1:166
    at Parser.error (/Volumes/Local/nuxt-test/node_modules/postcss-values-parser/lib/parser.js:127:11)
    at Parser.operator (/Volumes/Local/nuxt-test/node_modules/postcss-values-parser/lib/parser.js:162:20)
    at Parser.parseTokens (/Volumes/Local/nuxt-test/node_modules/postcss-values-parser/lib/parser.js:245:14)
    at Parser.loop (/Volumes/Local/nuxt-test/node_modules/postcss-values-parser/lib/parser.js:132:12)
    at Parser.parse (/Volumes/Local/nuxt-test/node_modules/postcss-values-parser/lib/parser.js:51:17)
    at parse (/Volumes/Local/nuxt-test/node_modules/postcss-custom-properties/index.cjs.js:47:30)
    at /Volumes/Local/nuxt-test/node_modules/postcss-custom-properties/index.cjs.js:333:24
    at /Volumes/Local/nuxt-test/node_modules/postcss/lib/container.js:91:18
    at /Volumes/Local/nuxt-test/node_modules/postcss/lib/container.js:74:18
    at Rule.each (/Volumes/Local/nuxt-test/node_modules/postcss/lib/container.js:60:16)
    at Rule.walk (/Volumes/Local/nuxt-test/node_modules/postcss/lib/container.js:71:17)
    at /Volumes/Local/nuxt-test/node_modules/postcss/lib/container.js:79:24
    at Root.each (/Volumes/Local/nuxt-test/node_modules/postcss/lib/container.js:60:16)
    at Root.walk (/Volumes/Local/nuxt-test/node_modules/postcss/lib/container.js:71:17)
    at Root.walkDecls (/Volumes/Local/nuxt-test/node_modules/postcss/lib/container.js:89:19)
    at transformProperties (/Volumes/Local/nuxt-test/node_modules/postcss-custom-properties/index.cjs.js:330:8)
 @ ./pages/index.vue?vue&type=style&index=1&id=58b3fa2b&lang=scss&scoped=true& (./node_modules/vue-style-loader??ref--7-oneOf-1-0!./node_modules/@nuxt/postcss8/node_modules/css-loader/dist/cjs.js??ref--7-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/@nuxt/postcss8/node_modules/postcss-loader/dist/cjs.js??ref--7-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--7-oneOf-1-3!./node_modules/vue-loader/lib??vue-loader-options!./pages/index.vue?vue&type=style&index=1&id=58b3fa2b&lang=scss&scoped=true&) 4:14-446
 @ ./pages/index.vue?vue&type=style&index=1&id=58b3fa2b&lang=scss&scoped=true&
 @ ./pages/index.vue
 @ ./node_modules/.cache/nuxt/router.js
 @ ./node_modules/.cache/nuxt/index.js
 @ ./node_modules/.cache/nuxt/client.js
 @ multi ./node_modules/.cache/nuxt/client.js

 FATAL  Nuxt build error                                                                 11:05:34

  at WebpackBundler.webpackCompile (node_modules/@nuxt/webpack/dist/webpack.js:2127:21)
  at processTicksAndRejections (internal/process/task_queues.js:93:5)
  at async WebpackBundler.build (node_modules/@nuxt/webpack/dist/webpack.js:2076:5)
  at async Builder.build (node_modules/@nuxt/builder/dist/builder.js:327:5)
  at async ensureBuild (node_modules/@nuxt/cli/dist/cli-generate.js:145:3)
  at async Object.run (node_modules/@nuxt/cli/dist/cli-generate.js:283:7)
  at async NuxtCommand.run (node_modules/@nuxt/cli/dist/cli-index.js:413:7)


   ╭─────────────────────────────╮
   │                             │
   │   ✖ Nuxt Fatal Error        │
   │                             │
   │   Error: Nuxt build error   │
   │                             │
   ╰─────────────────────────────╯

[lekobarros]

I believe this error is caused by postcss migration, usually nuxt comes with a pre-configuration of postcss. The problem is with cssnano, you need add this code in your nuxt.config.js to fix the problem:

// Build Configuration (https://go.nuxtjs.dev/config-build)
 build: {
   postcss: {
     plugins: {
       // Removed calc because its conflict with postcss8 + swiperjs
       'cssnano': {
         preset: [
           'default',
           {
             "calc": false
           }
         ]
       }
     }
   },
},

But I don’t remember if it was necessary to add any additional packages. If it isn’t work try add postcss-import.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.