Giters

nuxt-modules / tailwindcss

Tailwind CSS module for Nuxt

Home Page:https://tailwindcss.nuxtjs.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Gradient not working in production

brendan1212 opened this issue · comments

commented

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.

commented

dev:
image

preview:
image

commented

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.

commented

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.

commented

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

What version are you upgrading from, btw?

commented

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

commented

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 😄

commented

Great solution! Thanks for the help, @ineshbose.