Tailwind styles not showing on generated site, after running nuxt generate

Version

“@nuxtjs/tailwindcss”: “^4.2.1”, “nuxt”: “^2.15.7”, “postcss”: “^8.3.5”

Reproduction Link

Repo: https://github.com/revueltai/nuxt-tailwind-poc

1. Clone the repo
2. Run yarn dev > The site should load with the correct styles
3. Run yarn generate + yarn start > The site should generate correctly, but styles look broken when running it.

• Live Generated site: https://60e827bc46bf75b117417d77--admiring-feynman-abdd06.netlify.app/
• Comparison Screenshot: https://a.storyblok.com/f/47007/4730x2576/0df151cde6/screenshot-tailwind-nuxt.jpg

Steps to reproduce

Tailwind styles seem to not be included to the site, after running yarn generate. I am attaching an example repo that shows my problem in a context as close as possible to the real project I have to work on.

I see that if I set purging to false the generated site looks correct, but, as expected, the outputted css is very large.

I followed the installation steps stated here.

I tried many of the related answers on this repo’s issues, but none solved the problem 😦 .

At this stage I cannot figure it out if it is a dumb simple “you forgot to install something” problem, or some whitelisting I am missing, or if there is another issue going on.

Any help solving this will be greatly appreciated!

What is Expected?

The generated version should look the same as the dev one.

What is actually happening?

The generated version doesn’t show the styles for most of the elements.

[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.

[nachoadjust]

In our case the problem lied on Tailwind purging those classes that were created as a result of a strings concatenation (in a computed prop for example).

This would work:

computed () {
    getFontSize () {
         return 'sm:text-xl' // the generated version would include the sm:text-xl class
    }
}

And this would fail:

data () {
  return {
     fontSize: 'text-xl'
  }
},
computed () {
    getFontSize () {
         return 'sm:' + this.fontSize  // the generated version would not include the sm:text-xl class
    }
}

Our temp solution, so far, has also been adding all those classes that were being purged into the safelist object.