Tailwind classes not builded in the deploy

[Eltymus]

Select Topic Area

Bug

Body

I have this problem where the tailwind classes in my nuxt project, doesn't get builded in the head style of the site.
Link to the custom domain.
Repository
I tried putting some classes in the white list, even not cutom ones, re-installing tailwind and the packages and tring to change the yml to mimic my build in local, since the npm run build and preview works fine.

[github-actions[bot]]

💬 Your Product Feedback Has Been Submitted 🎉

Thank you for taking the time to share your insights with us! Your feedback is invaluable as we build a better GitHub experience for all our users.

Here's what you can expect moving forward ⏩

• Your input will be carefully reviewed and cataloged by members of our product teams. 
  • Due to the high volume of submissions, we may not always be able to provide individual responses.
  • Rest assured, your feedback will help chart our course for product improvements.
• Other users may engage with your post, sharing their own perspectives or experiences. 
• GitHub staff may reach out for further clarification or insight. 
  • We may 'Answer' your discussion if there is a current solution, workaround, or roadmap/changelog post related to the feedback.

Where to look to see what's shipping 👀

• Read the Changelog for real-time updates on the latest GitHub features, enhancements, and calls for feedback.
• Explore our Product Roadmap, which details upcoming major releases and initiatives.

What you can do in the meantime 💻

• Upvote and comment on other user feedback Discussions that resonate with you.
• Add more information at any point! Useful details include: use cases, relevant labels, desired outcomes, and any accompanying screenshots.

As a member of the GitHub community, your participation is essential. While we can't promise that every suggestion will be implemented, we want to emphasize that your feedback is instrumental in guiding our decisions and priorities.

Thank you once again for your contribution to making GitHub even better! We're grateful for your ongoing support and collaboration in shaping the future of our platform. ⭐

[waterfire-source]

Hey, @Eltymus
I just checked your site and repo - thanks for sharing both.

From what you’re describing, it sounds like Tailwind’s purge (content) config might not be picking up your files correctly during the production build on GitHub Pages.
This can happen if Tailwind doesn’t see any of your class usage, so it strips everything out.

A couple of things to double-check in your tailwind.config.js:

content: [
  './components/**/*.{vue,js}',
  './layouts/**/*.vue',
  './pages/**/*.vue',
  './app.vue',
  './plugins/**/*.{js,ts}',
  './nuxt.config.{js,ts}'
]

Also, since your site works fine locally with npm run build && npm run preview, but not after deploy, the issue might also be related to the GitHub Actions setup.

Make sure the deployed build step is actually building with production mode enabled (NODE_ENV=production), otherwise Tailwind might behave differently.

If you’ve tried whitelisting classes already and that didn’t work, try temporarily adding a hardcoded test class like bg-red-500 somewhere in your layout or a page just to see if anything makes it through - that’ll help isolate whether the purge is being too aggressive or something else is going on.

Let me know what you find - happy to dig in further if you share which classes specifically are missing!

[Eltymus]

Tank you for responding so soon, happy to receive help in this case, I'm at the point where I want to pick a nuxt-tailwind-template and just start over from that, still I would like to make this work.
I have different bg-blue-700 that stands out, I tried to whitelist that but it didn't work.
I also don't use tailwind.config.js cause in the new nuxt version (I'm using 3.16) ,there's no need, I already asked this question on stack-overflow and I followed this guide.
Also I didn't find this NODE_ENV in the code, where have you seen it?

[waterfire-source]

Ah gotcha - thanks for the extra context!
Yeah, with Nuxt 3.16 and the latest Tailwind module, the config is definitely more zero-config, but there are still cases where having an explicit tailwind.config.js helps, especially with debugging purge issues.

If bg-blue-700 isn't showing up even when hardcoded, that definitely confirms Tailwind is stripping out more than it should during the build step.

About NODE_ENV: I didn’t see it directly in your code, but sometimes GitHub Actions sets it to production automatically during builds — and Tailwind behaves differently based on that.
You could try forcing it just in case by modifying your build step like this:

- run: NODE_ENV=production npm run build

Also, I noticed you're deploying with GitHub Pages - maybe try running nuxt generate instead of nuxt build, since static hosting works better with a full pre-generated site.
You can do that with:

npm run generate

Then push the generated dist/ folder (or set it as your Pages root).

I totally get the feeling of wanting to just start over with a fresh Nuxt+Tailwind template, but I think you’re close here - happy to dig deeper if you want to share the workflow file or exact deployment setup.

Let’s figure this out!

[Eltymus]

I have a question, as you can see from the many actions, I tried different combination of your solutions, but unfortunately none worked, can you tell me if I have done something wrong? Did I put the NODE_ENV in the wrong run section? I even changed the config but thaat didn't help.
Even if you do not respond, thank you for the help regardless, you gave me some idea that I will try in this days to follow.

[zainali0303]

From what you described, it doesn’t sound like you did anything fundamentally wrong. Issues like this are often caused by NODE_ENV being set in the wrong run section or not being picked up by the build process as expected. Double-check that it’s defined in the environment where the build actually runs, and that your config matches that context. Using a Copy Tailwind color converter or similar tooling won’t affect this directly, but it can help eliminate color-related config confusion while you focus on fixing the environment setup.

[waterfire-source]

Hey, thanks for the kind words - and I really respect your persistence!
I just took a look at your Actions history, and yeah, I can see you’ve been testing different configs (which is great).

About NODE_ENV, yeah - it needs to be set inside the same run: block where you call the build command.
For example:

- name: Build project
  run: |
    NODE_ENV=production npm run generate

This way it only applies during the build process.
Setting it as a separate step like - name: Set env won’t have the same effect unless you export it in the shell or use env: correctly.
Also just a heads-up: since you're using nuxt generate, make sure your nuxt.config.ts has the right deployment target:

export default defineNuxtConfig({
  ssr: false,
  target: 'static',
})

And you might want to double check your app.html or any layout overrides - sometimes empty or custom layout files can accidentally prevent styles from being injected properly.

You're definitely close, and I’m happy to help you finish this - don’t hesitate to keep testing things out and ping me if you get stuck again.

You’ve got this.

[Eltymus]

IT WORKED, thank you for the brainstorming in the end it was this line:
static_site_generator: nuxt
I was already managing the configuration myself, so I removed it from the yml and it worked.
Thanks a lot again for your help, I have really appreciated it, you lifted my spirit with your kind words.

[zainali0303]

This issue usually happens when Tailwind isn’t detecting your files correctly during the production build, so the required Tailwind color class names are being purged and never included in the final CSS. Double-check the content paths in your Tailwind config, ensure dynamic class names are safelisted, and verify that your Nuxt build environment matches local settings.
The complete Tailwind CSS color reference. Instantly copy Hex, RGB, HSL, and OKLCH codes for Tailwind v4 and v3. The modern, responsive color picker for developers.