Docker environment not injecting tailwind.css

[twf-nikhila]

Here is the screenshot of code:

In local it works fine, and shows a gradient color around the button

But in production or on running npx nuxt generate

It doesn't show the gradient color.

On doing inspect element it shows the class present in source code, but doesn't gets applied somehow

[ineshbose]

Could this be related to your content configuration? Can you provide a reproduction over Stackblitz please?

[twf-nikhila]

Could this be related to your content configuration? Can you provide a reproduction over Stackblitz please?

Here it is on Netlify:

https://pictweak.netlify.app/

check the download & copy button design , originally should appear like this:

But doesn't

[twf-nikhila]

Did you find anything @ineshbose ?

[ineshbose]

Thanks for linking a deployment - but I'd need to look at the source code as well please, so a reproduction over a web container editor would be ideal.

You can use this as a starter - https://stackblitz.com/github/nuxt/starter/tree/v3-stackblitz?file=README.md

[luca-smartpricing]

The fix was:

export default defineNuxtConfig({
  experimental: {
    inlineSSRStyles: false
  }
})

I think this fix (nuxt/nuxt#21573) break the tailwind plugin

[Jogiter]

The fix was:

export default defineNuxtConfig({
  experimental: {
    inlineSSRStyles: false
  }
})

I think this fix (nuxt/nuxt#21573) break the tailwind plugin

save my day 👍

[CernyMatej]

Thank you for the workaround by disabling the experimental option; it has resolved the issue for me as well.
Btw. are there any updates on the progress of a fix within this module?

[ineshbose]

Hi, I'm still not aware of what is causing this bug because I haven't encountered it yet - can you provide a reproduction please and I'll investigate as quickly as possible?

[CernyMatej]

Interestingly, the issue occurs exclusively when building the app within a Docker container. (at least for me) It works as expected on StackBlitz, as well as locally on my MacBook.

Here is a minimal reproduction:
https://github.com/CernyMatej/tailwind-styles-reproduction

To reproduce the issue, build it with:

docker build . -t test

docker run -p 3000:3000 test

The Tailwind styles do not appear in the production build. However, if you uncomment inlineSSRStyles: false in nuxt.config.ts, it works as expected.

[ineshbose]

Sorry it took me a while to get to this, it seems that nuxt.options.css isn't being resolved into the Nuxt project - are all other styling working? (global CSS, outside of component <style> tags most likely)