How to apply global-styles.css (with Tailwind) to global.error.tsx file?

[maloyuso]

I'm including global-error.tsx boundary on my NextJS 14.1.0 app router application.
When I manually trigger an error, the styles and fonts are not being applied to that element.

I'm already adding the same configuration as the root layout. (html/head/body tags, global styles import, font classNames, etc)

[ananuness]

Hi, Yuso!!

As the docs states, we have to add the global-styles.css to RootLayout for our app to have access to tailwind styles, and considering that global-error.tsx is at the same level as the root layout, you will have to import global-styles.css in this file too!

[sanderquirynen]

Sorry to bump this old discussion. But when I do this it doesn't seem to work.
I see the stylesheet being loaded in the network tab, but it isn't being added to the section for some reason.

Next.js version 14.2.23

[nathanielmoon]

Experiencing this with "next": "14.2.8"

[tmsick]

same in 14.2.17

[sommeeeer]

same here at 14.2.24

[forjut]

same in 14.2.18

[sommeeeer]

got it to work on 14.2.24 by using import './(main)/globals.css';

here is my full code global-error.tsx for reference : https://gist.github.com/sommeeeer/7a01701cc3b5781ff8fa231b9fcf5703

to throw an error you can use this: https://gist.github.com/sommeeeer/0fc8ce7e5fffaf4a1e6f125168f12b65

remember its only possible to trigger the global-error.tsx in next start or once deployed on that version of Next 14