Styles break in production when using v2.1.0+

[siyosu]

Version

nuxt-security: 2.1.4
nuxt: ^3.14.1592

Reproduction Link

https://github.com/siyosu/nuxt-ui-v3
https://nuxt-ui-v3.vercel.app/

Steps to reproduce

1. Clone and build the project pnpm build
2. Run pnpm preview
3. Open in the browser

What is Expected?

The styles should look like the one on development

• Development
  

• Production
  

What is actually happening?

When previewing the built project, I noticed the styles were broken. I suspected the issue was with @nuxt/ui, as I'm trying out the new v3 .
But after looking into their issues, I came across a related issue nuxt/ui#2738 and realized I also had a similar module added, which is the nuxt-security module.
So I try reproduced the issue using only the @nuxt/ui and nuxt-security modules both with their default config.
The styles worked fine when nuxt-security wasn’t included or when using version 2.0.0. However, starting from version 2.1.0 and above, the styles break.

For now, I just decided to use version 2.0.0
This might also related to #569

[vejja]

Had a quick look, it seems like the Tailwind class space-y-4 is not applied
Is it the only style missing ?

[vejja]

@siyosu
Bug confirmed, I'm able to reproduce
Will look into it

[vejja]

Will have to investigate further, this is not easy
The Tailwind utilities layer is absent in the production build, hence the CSS issues.

For now, temporary fix seems to be setting nuxt.config.ts to :

security: { 
  removeLoggers: false 
}

Note: you are using Nuxt UI v3-alpha, which relies on Tailwind CSS v4-alpha
I'm not 100% clear why removing console.log statements also removes the tailwind utilities layer.
This could also be a Nuxt UI issue

[siyosu]

For now, temporary fix seems to be setting nuxt.config.ts to :

security: {
removeLoggers: false
}

Got it 👍🏼

Note: you are using Nuxt UI v3-alpha, which relies on Tailwind CSS v4-alpha I'm not 100% clear why removing console.log statements also removes the tailwind utilities layer. This could also be a Nuxt UI issue

Yes, it seems like it. I've tried using the v2, and it's working fine

[vejja]

@siyosu
I'm fixing
You can test the pre-release artifact of PR #577 with npm i https://pkg.pr.new/nuxt-modules/security/nuxt-security@577

[siyosu]

@vejja Just tested it, it works as expected now👍🏼

[vejja]

Hotfix released v2.1.5

[siyosu]

All good now, thank you @vejja 🫡