WorkOS nextjs impacts nextjs > 16 with no styling

[rozzrr]

Describe the bug
Using nextjs 16 or above, it seems when you use the workOS lib all styling is removed, this happened to me when it seemed to be fine then all of a sudden i lost styling completely (all tailwind). Upon testing if i remove the workos lib, styling is back.

To Reproduce
Steps to reproduce the behavior:

1. Create new nextjs project (latest)(with tailwindcss)
2. Install and configure workos with nextjs
3. Add a button ( i used shadznui)
4. See no styling and plain html

Expected behavior
styling to remain

Screenshots

Desktop (please complete the following information):

• OS: MacOS
• Browser chrome
• authkit-nextjs version [e.g. 2.11.1]
• Next.js version [e.g. > 16]

Additional context
if i downgrade to next 15.5.6 - this then has styling again

[nicknisi]

@rozzrr would you mind sharing a reproduction? I can't see how styling would be affected by this library as it has no styling whatsoever.

Also, maybe try deleting the .next/ directory and see if that resolves it. It's possible it's a weird build caching issue. Thanks!

[rozzrr]

@nicknisi - literally create a new nextjs app - add in workos nextjs and start the dev server.

very bizzare, went though all my libs and one by one until it was workos. i then moved nextjs from 16 -> 15:latest and i had the tailwind styling back.

i will try doing cache aswell, but its pretty consistent when i try this on new projects, done it 4 times as a clean slate away from our actual project

[nicknisi]

I've got an example app. It's working fine for me.

Could you try cloning and seeing if you're reproducing here? We've been testing on Next 16 and not seeing any issues like this. Thanks.

[rozzrr]

although this was updated to newer dependencies, its not a new project scaffolded with nextjs - where i see this issue. i notice how the repo also does not have the latest proxy middleware present. if i create a new nextjs project, add workos i then loose all styling in the app, i have done this a few times now with same result. i can clone your repo and have it with styling, but i am using tailwindcss - this is not. which is whats missing from your example.

[rozzrr]

ok i digged into this a bit - it seems that as i am using tailwindv4, i found that the proxy matcher was possibly blocking out the css as a sort of catch all - i think, so what i did was to adjust the matcher to be like

export const config = {
matcher: ['/((?!_next/static|_next/image|favicon.ico).*)'],
};

this then allows the globals.css file through on the network requests and not stopped by the proxy. might need to add some docs for this for tailwindcss users