Gradient not working in production

[brendan1212]

Version

@nuxtjs/tailwindcss: 6.11.3
nuxt: 2.17.2
node.js: 20.9.0

Reproduction Link

https://codesandbox.io/p/devbox/optimistic-wind-nslnd6

Steps to reproduce

run yarn preview:prod
(NODE_ENV=production yarn generate && yarn start)

I was able to get this problem running on the simplest of examples with no custom tailwind.config.js, which does tell me I'm likely doing something wrong. However, our code ran fine on Netlify for many months until a recent dependency upgrade.

I attempted, but was unable to find the last working combination of versions nuxt, plugin, and node.

What is Expected?

Styling should be the same for a simple example of background gradient between development and static generation.

What is actually happening?

When running yarn dev, the background gradient works fine. However, as a statically generated site, the style does not apply. The issue persists across Edge, Chrome, Safari.

[ineshbose]

dev:

preview:

[ineshbose]

The content detection and generated styles seem to be the same.. but it's odd that your .bg-gradient-to-tr isn't making a difference to your div. Let me see.

[ineshbose]

It's something to do with the CSS variables that Tailwind injects and uses. Seems that in the Nuxt 2 build, we don't have --tw-gradient-to-position: ; - not sure why this is happening but let me continue investigating.

[ineshbose]

However, our code ran fine on Netlify for many months until a recent dependency upgrade.

What version are you upgrading from, btw?

[ineshbose]

This issue persists with vanilla Tailwind as well, but downgrading Tailwind CSS to 3.2.x resolves this. Should go through their changelog.

[ineshbose]

OK - here's the issue.

v3.3 introduced: tailwindlabs/tailwindcss#10886

This may have caused some conflict/issues between from-[color] and from-[percentage], and Nuxt 2 uses html-minifer in the build and unable to resolve this well. The fix for this would be adding this to your Nuxt config:

export default {
    build: {
      html: {
        minify: {
          collapseBooleanAttributes: true,
          decodeEntities: true,
          minifyCSS: false, // set this to false
          minifyJS: true,
          processConditionalComments: true,
          removeEmptyAttributes: true,
          removeRedundantAttributes: true,
          trimCustomFragments: true,
          useShortDoctype: true
        }
      },
    },
}

refer https://v2.nuxt.com/docs/configuration-glossary/configuration-build#htmlminify

Unfortunately there wouldn't be any code that we can add to the module for this fix, and depends on per-project. 🙁

But I hope this helps with your case! Let me know 😄

[brendan1212]

Great solution! Thanks for the help, @ineshbose.